# Empty States

> 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.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/empty-states
- Install: `npx shadcn@latest add @geturui-pro/empty-states`
- Dependencies: motion, lucide-react

## Variants

### Archive drawer

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

Install: `npx shadcn@latest add @geturui-pro/empty-states-archive-drawer`

```tsx
import { ArchiveDrawerEmpty } from "@/components/blocks/empty-states/archive-drawer";

export function Archive() {
  return <ArchiveDrawerEmpty onAction={() => router.push("/projects")} />;
}
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/empty-states-search-lens`

```tsx
import { SearchLensEmpty } from "@/components/blocks/empty-states/search-lens";

export function NoResults({ query }: { query: string }) {
  return <SearchLensEmpty query={query} suggestions={["Q3 report", "revenue plan"]} onSuggestion={setQuery} onAction={() => setQuery("")} />;
}
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/empty-states-inbox-zero`

```tsx
import { InboxZeroEmpty } from "@/components/blocks/empty-states/inbox-zero";

export function Inbox() {
  return <InboxZeroEmpty description="Next digest arrives at 9:00 AM." onAction={compose} onSecondary={openArchive} />;
}
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/empty-states-blank-board`

```tsx
import { BlankBoardEmpty } from "@/components/blocks/empty-states/blank-board";

export function Board() {
  return <BlankBoardEmpty columns={["Backlog", "Building", "Shipped"]} onAction={createCard} onSecondary={importCsv} />;
}
```

| 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. |

## 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.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.