# Empty

Says what is missing and offers the one next step. Eight kinds, from a drop area to a 404.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/empty
```

## Usage

```tsx
import { Empty, EmptyFan } from '@/components/fetaui/empty'
import { BellIcon } from '@fetaui/react/rounded/bell'

export function Example() {
  return <Empty media={<EmptyFan><BellIcon /></EmptyFan>} title="You're all caught up" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| container | card, background, outline | card |
| media | ReactNode |  |
| title | ReactNode | required |
| description | ReactNode |  |
| level | 2, 3, 4 | 2 |
| actions | ReactNode |  |
| footer | ReactNode |  |
| onFiles | (files) => void |  |
| animated | boolean | true |
| EmptyFan tone | danger |  |
| EmptyCode | ReactNode |  |
| EmptyChip | button props |  |

## When to use

- When a list, page or search has nothing to show.
- One main action. When filters caused it, clearing them is the action.

## When not to use

- Instead of a Skeleton: show it only after loading finishes.
- With jokes in error states.

## Accessibility

- Media is decorative unless it is a person.
- The title is a heading: set `level` to fit the page.
- Move focus to the main action when an empty state replaces content.

## Motion

- The body fades and rises 8 px over 320 ms, then everything stays still.
- Ghost tiles open like a hand of cards in 400 ms.
- Text and actions fade in 40 ms apart.
- In the Outline drop area, dashes turn to ink and the tile lifts 4 px during a drag.
- With reduced motion, it only fades and the fan is already open.