Empty
kumo-svelte

Empty

A component to display when there's no content or data to show, with optional command line and actions.

Installation

Barrel

import { Empty } from 'kumo-svelte';

Granular

import { Empty } from 'kumo-svelte/components/empty';

Usage

<script lang="ts">import { Empty } from "kumo-svelte";import { Package } from "phosphor-svelte";</script><Empty  title="No packages found"  description="Get started by installing your first package."  commandLine="npm install @kumo/ui">  {#snippet icon()}    <Package size={48} />  {/snippet}</Empty>

Examples

Basic

Sizes

Empty states come in three sizes to fit different container contexts.

With Command Line

Include a copyable command to help users get started.

With Actions

Add custom action buttons using child content.

Minimal

At minimum, only a title is required.

API Reference

PropTypeDefaultDescription
size 'sm' | 'base' | 'lg'"base"Size preset.
icon Snippet-Decorative icon displayed above the title.
title *string-Title content.
description string-Supporting description text.
commandLine string-Shell command displayed in a copyable code block.
contents Snippet-Custom empty-state content.
class string-Additional classes merged onto the root element.