# Empty state

> Empty, no-results, error, offline, maintenance and rate-limit states with one API.

Component · Free · https://lodeui.com/components/empty-state

## When to use

- Empty lists, no search results, errors, offline, no access and maintenance.

## When not to use

- Loading: use a skeleton.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/empty-state.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { EmptyState } from "@/components/ui/empty-state";
import { Button } from "@/components/ui/button";

export function NoProjects() {
  return <EmptyState bordered title="No projects yet" description="Create one to start deploying." action={<Button>New project</Button>} />;
}
```

## API reference

### EmptyState

Icon, title, description and action, with presets for common cases.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"empty" \| "search" \| "error" \| "offline" \| "forbidden" \| "maintenance"` | `"empty"` | Sets a default icon and title. |
| icon / title / description / action | `ReactNode` | – | Override any part. |
| bordered | `boolean` | – | Dashed border for empty panels. |

## Accessibility

- The title is a heading-sized paragraph; the icon is decorative.

## Responsive behavior

- Centered with a narrow text column.

## Performance

- Static.

## Notes for AI

- Always give people a next step in action.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Skeleton](https://lodeui.com/components/skeleton) — Shimmering placeholders for loading content.