Search for a command to run...
Empty-state surface for lists, tables, and panels. Centered card with a dashed border that holds a title, description, and (optionally) media + actions to direct the user toward the next step.
Compose with EmptyMedia to add a leading icon tile, and EmptyContent to drop in actions below the header.
EmptyThe outer container — flex flex-col items-center justify-center with a dashed border and p-12 padding.
EmptyHeader / EmptyTitle / EmptyDescriptionTypography slots. Header is a flex flex-col max-w-sm gap-2 wrapper for the title/description block.
EmptyTitle — text-lg font-medium text-fg-high.EmptyDescription — text-sm/relaxed text-fg-mid with auto-underlined <a>.EmptyMediaOptional leading visual — a bare wrapper above the title. Drop in an icon (text-fg-mid, default size-10) or a full illustration. No chip/box behind the glyph; the title carries the visual weight.
EmptyContentSlot below the header for action buttons. flex flex-col items-center gap-4 max-w-sm.
Lead with a specific title — "No conversations yet" reads better than "Empty." The empty state is your one chance to teach what this surface is for.
Drop a CTA into EmptyContent whenever the user can fix the emptiness in-place ("Compose,"
"Invite teammates"). Skip it for purely informational empty states.
Stack two paragraphs of description. If you need that much explanation, link to docs instead — empty states should be scannable.
Use Empty for loading states. Reach for Skeleton — Empty implies "nothing here yet," not
"still arriving."