Empty

---
import FileQuestion from "@lucide/astro/icons/file-question-mark"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FileQuestion />
    </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

npx shadcn@latest add @fulldev/empty

Usage

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

---
import Inbox from "@lucide/astro/icons/inbox"
---

<Empty>
  <EmptyMedia>
    <Inbox />
  </EmptyMedia>
  <EmptyTitle>No results</EmptyTitle>
  <EmptyDescription> Try adjusting your filters. </EmptyDescription>
</Empty>

Composition

Use the following composition to build an Empty state:

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 for more information on props.