Empty

An empty state container for when there is no data to display.

shadcn/ui docs →

Preview

No results found
Try adjusting your search or filters.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/empty.json

Usage

example.tsx
import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
} from "@/components/ui/empty"
import { Inbox } from "lucide-react"
import { Button } from "@/components/ui/button"

<Empty className="border-2 border-border rounded-base">
  <EmptyMedia variant="icon">
    <Inbox className="size-6" />
  </EmptyMedia>
  <EmptyHeader>
    <EmptyTitle>No results found</EmptyTitle>
    <EmptyDescription>
      Try adjusting your search or filters to find what you're looking for.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Clear filters</Button>
  </EmptyContent>
</Empty>
0