Empty

404 - Page Not Found

The page you are looking for does not exist.

Go home

---
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" />
    </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

To install the empty component, run the following command:

npx shadcn@latest add @fulldev/empty

Usage

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

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