# Empty state (goodtabs UI)

An icon, one line and one action for a list with nothing in it yet.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/empty-state.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/empty-state`

## Usage

```tsx
import { EmptyState } from "@/components/ui/empty-state"

<EmptyState title="No saved tabs yet." />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| icon | `ReactNode` |  | An icon drawn in a quiet tile. |
| title | `string` |  | One line saying what is missing. |
| action | `ReactNode` |  | The one action, usually a Button. |

## When to use

- Lists, tables and pages before the first item exists
- Search or filters that match nothing

## When not to use

- Errors: say what failed and how to retry
- Loading: use a skeleton or spinner

## Notes for agents

- Keep the line to one sentence and make the action the way out
- The icon is decorative and aria-hidden
- Pass a Button as action; it is not built in

Docs: https://ui.goodtabs.co/components/empty-state