A friendly empty list with an illustration, guidance, and creation CTAs.
Install with the CLI, or add the packages and paste the source below.
Add Empty State to your app with its source-owned dependencies.
npx cooud-ui add empty-state
Install the Cooud UI packages, then paste the block below.
Copy the source for Empty list. Every class is a semantic token, so it re-themes with your app.
import {Button,Empty,EmptyContent,EmptyDescription,EmptyIcon,EmptyTitle,} from "@cooud-ui/ui";import { Inbox, Plus } from "lucide-react";export function EmptyStateBlock() {return (<Empty className="bg-surface-raised"><EmptyIcon><Inbox aria-hidden="true" /></EmptyIcon><EmptyTitle>No projects yet</EmptyTitle><EmptyDescription>Create your first project to start shipping. You can invite teammates and connect arepository at any time.</EmptyDescription><EmptyContent><Button variant="outline" size="sm">Import existing</Button><Button variant="gradient" size="sm"><Plus className="size-4" aria-hidden="true" />New project</Button></EmptyContent></Empty>);}