Components

Empty

A composable placeholder for empty states — no data, no results, or first-run views — with slots for an icon, title, description, and a call to action.

Basic usage

Compose EmptyHeader, EmptyMedia, and EmptyContent to guide the user toward a next action.

No messages yet

Your inbox is empty. New conversations will show up here as they arrive.

Icon only

The simplest form — an icon, title, and description with no action. Use EmptyMedia variant="icon" for the compact badge treatment.

No projects

Create your first project to start organizing work.

No results

For search and filter results, use variant="default" on the media to render larger artwork and offer a reset action.

No results found

We couldn't find anything matching “quarterly report”. Try a different search.

Props

Prop	Type	Default	Description
`Empty`	div	`—`	Root container. Centers its children vertically and horizontally with a dashed border style.
`EmptyHeader`	div	`—`	Groups the media, title, and description in a constrained, centered column.
`EmptyMedia`	div	`—`	Holds the icon or illustration. Accepts a variant prop.
`EmptyMedia.variant`	'default' \| 'icon'	`'default'`	'icon' renders a muted rounded badge sized for a Lucide icon; 'default' is an unstyled wrapper for larger artwork.
`EmptyTitle`	div	`—`	The primary headline summarizing the empty state.
`EmptyDescription`	div	`—`	Supporting text. Anchor children are auto-styled as underlined links.
`EmptyContent`	div	`—`	Slot for the call-to-action(s) — buttons, inputs, or links — below the header.
`className`	string	`—`	Additional Tailwind classes; available on every part.

Accessibility

Decorative icons inside EmptyMedia convey no meaning on their own — the EmptyTitle and EmptyDescription text carries the message for screen readers.
Always pair the empty state with a clear, actionable EmptyTitle so users understand why the area is empty, not just that it is.
Links placed inside EmptyDescription are automatically underlined for distinguishability beyond color alone.
Action buttons in EmptyContent remain fully keyboard-focusable and inherit the brand focus ring.