Data Display

Empty

Display an empty state placeholder with an icon or avatar, title, description, and optional action buttons. Useful for empty lists, search results, and onboarding.

Playground

Experiment with different props in real-time.

No items

You have no items in your inbox.

Variant

Size

Basic Usage

Provide an icon, title, and description.

No items

You have no items in your inbox.

<script lang="ts">
  import { Empty } from 'sv5ui';
</script>

<Empty
  icon="lucide:inbox"
  title="No items"
  description="You have no items in your inbox."
/>

Variants

4 visual styles.

Outline

Soft

Subtle

Solid

<Empty icon="lucide:inbox" title="Outline" variant="outline" />
<Empty icon="lucide:inbox" title="Soft" variant="soft" />
<Empty icon="lucide:inbox" title="Subtle" variant="subtle" />
<Empty icon="lucide:inbox" title="Solid" variant="solid" />

Sizes

5 sizes controlling typography and padding.

<Empty icon="lucide:inbox" title="Extra Small" size="xs" />
<Empty icon="lucide:inbox" title="Small" size="sm" />
<Empty icon="lucide:inbox" title="Medium" size="md" />
<Empty icon="lucide:inbox" title="Large" size="lg" />
<Empty icon="lucide:inbox" title="Extra Large" size="xl" />

With Actions

Add action buttons with the actions prop.

No results found

Try adjusting your search or filters.

<Empty
  icon="lucide:file-x"
  title="No results found"
  description="Try adjusting your search or filters."
  actions={[
    { label: 'Clear Filters', variant: 'outline', color: 'surface' },
    { label: 'New Search', variant: 'solid' }
  ]}
/>

With Avatar

Use avatar instead of icon for a personalized empty state.

No messages

Start a conversation to see messages here.

<Empty
  avatar={{ src: 'https://i.pravatar.cc/150?u=empty', alt: 'User' }}
  title="No messages"
  description="Start a conversation to see messages here."
/>

Custom Snippets

Use snippets to customize individual sections of the empty state.

Get Started

Create your first project to begin.

<Empty variant="soft">
  {#snippet leading()}
    <div class="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
      <Icon name="lucide:rocket" class="size-8 text-primary" />
    </div>
  {/snippet}
  {#snippet titleSlot()}
    <h3 class="text-lg font-bold">Get Started</h3>
  {/snippet}
  {#snippet descriptionSlot()}
    <p class="text-on-surface/60 text-sm">Create your first project to begin.</p>
  {/snippet}
  {#snippet actionsSlot()}
    <Button label="Create Project" leadingIcon="lucide:plus" />
  {/snippet}
</Empty>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Root container — controls layout, background, border, padding`
`header`	`Header container wrapping icon/avatar + title + description`
`avatar`	`Avatar element styling`
`title`	`Title text — controls font size, weight, color`
`description`	`Description text — controls font size and opacity`
`body`	`Body container wrapping actions`
`actions`	`Actions container — controls layout and gap`
`footer`	`Footer container`

Snippets

Use snippets to customize specific parts of the empty state.

Snippet	Description
`leading`	`Custom content replacing the icon/avatar area`
`titleSlot`	`Custom title content — overrides title prop`
`descriptionSlot`	`Custom description content — overrides description prop`
`actionsSlot`	`Custom actions content — overrides actions prop`
`header`	`Replaces entire header area (leading + title + description)`
`body`	`Replaces entire body area (actions)`
`footer`	`Custom footer content`
`children`	`Default slot for fully custom content`

Props

Prop	Type	Default	Description
`icon`	`string`	`-`	`Icon to display (takes precedence over avatar)`
`avatar`	`AvatarProps`	`-`	`Avatar config (visible when no icon)`
`title`	`string`	`-`	`Main heading text`
`description`	`string`	`-`	`Supporting description text`
`actions`	`ButtonProps[]`	`-`	`Array of action button configs`
`variant`	`'solid' \| 'outline' \| 'soft' \| 'subtle'`	`'outline'`	`Visual style`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Overall size and typography scale`
`as`	`keyof HTMLElementTagNameMap`	`'div'`	`HTML element to render as`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Chip Skeleton