Empty state

Empty state

An illustration, a headline, a sentence of why, and one or two actions, for lists and pages with nothing in them yet.

Group

Empty states

Origin

Inspired · Original (this library)

License

MIT

Added

Oct 22

npx shadcn@latest add @deank/empty-state

The registry stays private. Install from the repo with a GitHub token — see the README.

Usage

import { EmptyState } from "@/registry/blocks/empty-state/empty-state";

<EmptyState title="…" />

Prop	Type	Default	Description
`title`	`string`
`description?`	`ReactNode`
`illustration?`	`"inbox" \| "search" \| "folder" \| ReactNode`	`"inbox"`	Built-in picture, your own node, or none
`actions?`	`ReactNode`		Primary and secondary actions, e.g. <Button>…</Button>
`bordered?`	`boolean`	`false`	Dashed outline for use inside a page section

First-run lists, empty search results, cleared inboxes and missing data.

Loading (use shimmer-loader); errors that need a fix (show the error inline).