Empty
A container for displaying empty state information.
No projects yet
Create a project to start organizing your work.
Installation
pnpm dlx shadcn@latest add @columbus/emptyUsage
import { Button } from "@/components/ui/button";
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
import { FolderIcon } from "lucide-react";
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<FolderIcon />
</EmptyMedia>
<EmptyTitle>No projects yet</EmptyTitle>
<EmptyDescription>Create a project to get started.</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Create project</Button>
</EmptyContent>
</Empty>;Media and links
Without variant="icon", EmptyMedia shows its content as is, so you can use a
larger icon, an image, or an Avatar. Links inside
EmptyDescription are underlined for you.
API reference
This is a custom component, not a Base UI wrapper. Every part renders a <div>
and accepts every native <div> attribute.
EmptyMedia
Prop
Type