Empty state ported

A useful next step when there is nothing to show yet.

A useful next step when there is nothing to show yet.

Live specimen

Loading demo…

Guidance

When to use

Empty lists, zero search results, and first-run views.
A view that should morph between states, such as empty and success, by changing props.

When not to use

Use skeleton while data is still loading.
Use alert for errors inside a page that still has content.
Use onboarding-checklist when first-run needs several steps.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/empty-state

Usage

<script lang="ts">
  import { EmptyState } from '$lib/components/empty-state';
  import { Button } from '$lib/components/button';
  import { Search } from '@lucide/svelte';
</script>

<EmptyState
  title="No results found"
  description="Try adjusting your search terms or filters to find what you need."
>
  {#snippet icon()}
    <Search size={24} strokeWidth={1.5} />
  {/snippet}
  {#snippet action()}
    <Button variant="secondary" size="sm">Clear filters</Button>
  {/snippet}
</EmptyState>

Variants & Examples

Default

Standard appearance and configuration.

<EmptyState
  title="No files yet"
  description="Upload your first document to get started."
/>

API Reference

Prop	Type	Default	Description
`title`	`string`	–	(Required) Headline. A new title rises in while the old one leaves.
`description`	`string`	–	(Required) One or two sentences on why it is empty and what to do.
`action`	`Snippet`	–	Call to action, usually a button.
`icon`	`Snippet`	'<Folder />'	Leading icon. A different icon component crossfades in.
`className`	`string`	–	Class for the root section.
`label`	`string`	–	Accessible name for the section region.

Keyboard Interactions

Key	Action
`Tab`	Moves focus to the interactive element.

Accessibility

Renders a section with an h3 title; pass label to name the region.
The icon is aria-hidden.
Outgoing copy is hidden from assistive tech while it fades.

Motion

- Changing title or description rolls the copy in place while the block height springs to fit. - A new icon pops in with a short blur. - Reduced motion swaps copy with a fade and snaps height; the icon's idle animation stops.

Notes for AI

Use for empty lists, zero search results, and first-run views. Use skeleton while data is loading.
Keep it mounted and change its props to morph between states such as empty and success.

Source of truth: registry/components/empty-state/empty-state.tsx