Empty

An empty-state container for "no data" placeholders, with optional media, title, description, and action slots.

Install

npx shadcn@latest add https://atomx.acau.net/r/empty.json

Use Empty to communicate the absence of content — an empty inbox, no search results, a list a user hasn't populated yet. Compose EmptyHeader (containing an EmptyMedia, EmptyTitle, and EmptyDescription) with an EmptyContent slot for actions.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Inbox />
    </EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>You're all caught up.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Refresh</Button>
  </EmptyContent>
</Empty>

Preview

Default

No messages

Your inbox is empty. Messages will appear here when you receive them.

Icon media variant

Nothing here yet

Create your first item to get started.

Props

Component	Extends	Notes
`Empty`	`<div>`	Outer container.
`EmptyHeader`	`<div>`	Wraps media + title + description.
`EmptyMedia`	`<div>`	`variant` is `"default"` or `"icon"` (rounded muted tile).
`EmptyTitle`	`<div>`	Heading text.
`EmptyDescription`	`<p>`	Supportive copy.
`EmptyContent`	`<div>`	Slot for actions below the header.