<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<FolderCodeIcon />
</EmptyMedia>
</EmptyHeader>
<EmptyTitle>No Projects Yet</EmptyTitle>
<EmptyDescription>
You haven't created any projects yet. Get started by creating your first
project.
</EmptyDescription>
<EmptyContent>
<Button>Create Project</Button>
</EmptyContent>
</Empty>Installation
Set up dotUI first — export your design system from the Studio, which registers @dotui in your project. See Installation.
pnpm dlx shadcn@latest add @dotui/emptyUsage
import {
Empty,
EmptyDescription,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"<Empty>
<EmptyMedia variant="icon">
<FolderIcon />
</EmptyMedia>
<EmptyTitle>No projects</EmptyTitle>
<EmptyDescription>Get started by creating a new project.</EmptyDescription>
</Empty>Anatomy
EmptyHeader groups the media, title, and description; EmptyContent holds the actions below. Pass variant="icon" to EmptyMedia to render its child inside a bordered icon container.
import {
Empty,
EmptyHeader,
EmptyMedia,
EmptyTitle,
EmptyDescription,
EmptyContent,
} from "@/components/ui/empty"<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">{/* icon */}</EmptyMedia>
<EmptyTitle>{/* heading */}</EmptyTitle>
<EmptyDescription>{/* supporting text */}</EmptyDescription>
</EmptyHeader>
<EmptyContent>{/* actions */}</EmptyContent>
</Empty>Examples
Basic Empty State
No Projects
In Card
404 Error Page
API Reference
Empty
An empty state displays a placeholder message and optional actions when there is no content to show.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
EmptyHeader
Contains the media, title, and description of the empty state.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
EmptyMedia
The visual media of the empty state, such as an icon, image, or avatar.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
"default" | "icon" | 'default' | ||
EmptyTitle
EmptyDescription
Supporting text that explains the empty state or how to resolve it.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
EmptyContent
Contains the actions and supplementary content of the empty state, such as buttons or links.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
Last updated on 10/15/2026