# Empty State

Placeholder for empty lists, no search results and errors, with an icon, headline, short message and action. Soft light falls from the top as the content fades in.

> Composed · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add empty-state
```

## Import

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

## Variants

- `search` — Search: `npx @lumioui/cli add empty-state-search`
- `variants` — Variants: `npx @lumioui/cli add empty-state-variants`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"default" | "search" | "error"` | Visual tone. Default "default". |
| `icon?` | `React.ReactNode` | Icon slot rendered in the lit well. Defaults to a Lumio glyph per variant. |
| `title` | `string` | Headline. |
| `description?` | `string` | Supporting copy. |
| `action?` | `React.ReactNode` | Optional action slot (e.g. a <Button>). |
| `lit?` | `boolean` | Light the stage from above in the surface accent. Default true. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/empty-state