Empty States

4 variantsPro

Four empty states with illustrations drawn from shapes — an archive drawer, a searching lens, an inbox-zero tray and a blank kanban board — each looping gently beside one clear action.

empty stateillustrationno resultsinbox zerokanbanarchiveonboardingzero data

Archive drawer

archive-drawer.tsx

A cabinet drawer slides out, empty folder tabs peek up, and it rolls shut again.

$npx shadcn@latest add @geturui-pro/empty-states-archive-drawer

Prop	Type	Default	Description
`title`	`string`	—	Heading under the illustration.
`description`	`string`	—	One or two sentences of guidance.
`secondaryLabel / onSecondary`	`string / () => void`	—	Secondary action. Pass an empty label to hide it.
`actionLabel / onAction`	`string / () => void`	—	Primary action. Pass an empty label to hide it.
`className`	`string`	—	Extra classes on the section.

Search lens

search-lens.tsx

A lens drifts over skeleton results, flashes a no-match mark at each stop, and offers suggestion chips.

$npx shadcn@latest add @geturui-pro/empty-states-search-lens

Prop	Type	Default	Description
`title`	`string`	—	Heading under the illustration.
`description`	`string`	—	One or two sentences of guidance.
`query`	`string`	—	Quoted in the default title.
`suggestions / onSuggestion`	`string[] / (term: string) => void`	—	Alternative searches as chips.
`actionLabel / onAction`	`string / () => void`	—	Primary action. Pass an empty label to hide it.
`className`	`string`	—	Extra classes on the section.

Inbox zero

inbox-zero.tsx

The last letter drops into an empty tray, a check badge pops and sparkles twinkle.

$npx shadcn@latest add @geturui-pro/empty-states-inbox-zero

Prop	Type	Default	Description
`title`	`string`	—	Heading under the illustration.
`description`	`string`	—	One or two sentences of guidance.
`secondaryLabel / onSecondary`	`string / () => void`	—	Secondary action. Pass an empty label to hide it.
`actionLabel / onAction`	`string / () => void`	—	Primary action. Pass an empty label to hide it.
`className`	`string`	—	Extra classes on the section.

Blank board

blank-board.tsx

A cursor drags a ghost card across empty kanban columns over pulsing placeholders.

$npx shadcn@latest add @geturui-pro/empty-states-blank-board

Prop	Type	Default	Description
`title`	`string`	—	Heading under the illustration.
`description`	`string`	—	One or two sentences of guidance.
`columns`	`[string, string, string]`	`["To do", "In progress", "Done"]`	Column names in the illustration.
`secondaryLabel / onSecondary`	`string / () => void`	—	Secondary action. Pass an empty label to hide it.
`actionLabel / onAction`	`string / () => void`	—	Primary action. Pass an empty label to hide it.
`className`	`string`	—	Extra classes on the section.

Install the whole set

Installs every empty states variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/empty-states

Accessibility

Each state is a labelled section; the illustration is aria-hidden so only the heading, copy and actions are read.
Actions are real buttons with visible focus; suggestion chips are buttons too.
With reduced motion the illustrations render a single still frame.

Bento Showcase