Empty
A container for empty states with slots for icon, title, description, and actions
No items yet
Get started by creating your first item.
A flexible empty state component for displaying placeholder content when there's no data to show. Perfect for empty lists, search results with no matches, or initial states.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/empty.jsonCopy from the nteract/elements registry.
Usage
import {
Empty,
EmptyIcon,
EmptyTitle,
EmptyDescription,
EmptyActions,
} from "@/registry/primitives/empty"
import { Inbox } from "lucide-react"
export function Example() {
return (
<Empty>
<EmptyIcon>
<Inbox />
</EmptyIcon>
<EmptyTitle>No items</EmptyTitle>
<EmptyDescription>
There are no items to display.
</EmptyDescription>
<EmptyActions>
<Button>Add Item</Button>
</EmptyActions>
</Empty>
)
}Examples
With Icon
No files found
<Empty>
<EmptyIcon>
<FileX />
</EmptyIcon>
<EmptyTitle>No files found</EmptyTitle>
</Empty>With Title and Description
No results
We couldn't find anything matching your search. Try adjusting your filters or search terms.
<Empty>
<EmptyIcon>
<Search />
</EmptyIcon>
<EmptyTitle>No results</EmptyTitle>
<EmptyDescription>
We couldn't find anything matching your search. Try adjusting your filters or search terms.
</EmptyDescription>
</Empty>With Action Button
No notebooks
Create a new notebook to get started with your analysis.
<Empty>
<EmptyIcon>
<Inbox />
</EmptyIcon>
<EmptyTitle>No notebooks</EmptyTitle>
<EmptyDescription>
Create a new notebook to get started with your analysis.
</EmptyDescription>
<EmptyActions>
<Button size="sm">New Notebook</Button>
</EmptyActions>
</Empty>Size Variants
Small empty state
Default empty state
Large empty state
<Empty size="sm">
<EmptyTitle>Small empty state</EmptyTitle>
</Empty>
<Empty size="default">
<EmptyTitle>Default empty state</EmptyTitle>
</Empty>
<Empty size="lg">
<EmptyTitle>Large empty state</EmptyTitle>
</Empty>Props
Empty
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "default" | Size variant for padding and spacing |
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | — | All standard div attributes |
EmptyIcon
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | — | All standard div attributes |
EmptyTitle
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLHeadingElement> | — | All standard h3 attributes |
EmptyDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLParagraphElement> | — | All standard p attributes |
EmptyActions
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | — | All standard div attributes |