Display an empty state when no data is available.
Loading...
import { InboxIcon } from "lucide-react"
import { Button } from "@/components/ui/button"Installation
pnpmnpmyarnbun
Usage
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"<Empty>
<EmptyHeader>
<EmptyMedia>
<Icon />
</EmptyMedia>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found.</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>Examples
With Icon Variant
Use variant="icon" on EmptyMedia to display the icon in a circular background.
Loading...
import { FileIcon } from "lucide-react"
import { Button } from "@/components/ui/button"API Reference
Empty
Main wrapper component.
EmptyMedia
Container for icons, images, or avatars.
EmptyTitle
Primary heading text.
EmptyDescription
Supporting description text. Links are automatically styled.
EmptyContent
Action area for buttons or other interactive elements.