# EmptyState

Recurring "nothing here yet" surface. Drop into any list, table, or section that can be empty — icon, title, description, and an optional action keep the spacing rhythm consistent across mini-apps.

[View examples](https://marsam.rahhal.app/components/empty-state) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/empty-state`

**Category:** `feedback`

## Props

| prop | type | purpose |
| --- | --- | --- |
| icon | ReactNode | rendered in a 2.75rem rounded tile (any 20–24px icon) |
| title | ReactNode | headline — short noun phrase |
| description | ReactNode | one sentence explaining what unblocks the empty state |
| action | ReactNode | trailing button(s) |
| size | sm | md | lg | vertical density |

## Patterns

- Keep titles **descriptive**, not apologetic: "No saved places yet" beats "Oops, nothing here".
- The action should be the single highest-leverage step the user can take to fill the state — not a generic "refresh".