Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Empty
description: Displays an empty state placeholder with optional media, title, and description.
---

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'empty' }}
---
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { Icon } from "@/components/ui/icon"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon name="file-question-mark" />
    </EmptyMedia>
    <EmptyTitle>404 - Page Not Found</EmptyTitle>
    <EmptyDescription>
      The page you are looking for does not exist.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm"> Go home </Button>
  </EmptyContent>
</Empty>
```

## Installation

```bash
npx shadcn@latest add @fulldev/empty
```

## Usage

```ts
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
```

```astro
<Empty>
  <EmptyMedia>
    <Icon name="inbox" />
  </EmptyMedia>
  <EmptyTitle>No results</EmptyTitle>
  <EmptyDescription> Try adjusting your filters. </EmptyDescription>
</Empty>
```

## Composition

Use the following composition to build an `Empty` state:

```text
Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent
```

## Notes

- Use `EmptyHeader` when you want the media, title, and description grouped as
  one block.
- `EmptyMedia variant="icon"` is a good default for simple status states.
- Add `EmptyContent` only when the empty state needs an action such as retry,
  clear filters, or go back.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/empty) for more information on props.