# EmptyState

> `EmptyState` is part of the States set, imported from `@jcsoftdev/ui/states`.

Source: https://ui.jcsoftdev.com/docs/components/empty-state

`EmptyState` is part of the States set, imported from `@jcsoftdev/ui/states`.

## Import

```ts
import { EmptyState } from "@jcsoftdev/ui/states";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/states/empty-state`.

## Usage

```tsx
<EmptyState
  icon={<CalendarX className="size-8" />}
  title="Sin citas para hoy"
  description="Cuando un cliente reserve, su cita aparecerá aquí."
  action={<Button>Nueva cita</Button>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` |  | Decorative icon; hidden from screen readers. |
| `title` * | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `action` | `ReactNode` |  | Primary call to action. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/states-emptystate--default)
- [Title Only](/storybook/?path=/story/states-emptystate--title-only)
- [Inventory](/storybook/?path=/story/states-emptystate--inventory)
- [Narrow](/storybook/?path=/story/states-emptystate--narrow)

## Source

`packages/ui/src/states/empty-state/empty-state.tsx`