Empty State
shadcn/uiDisplay an empty state when there's no data to show.
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from "@/registry/optics/empty";import { Button } from "@/registry/optics/button";import { FolderCode } from "lucide-react";<Empty> <EmptyHeader> <EmptyMedia variant="icon"> <FolderCode /> </EmptyMedia> <EmptyTitle>No Projects Yet</EmptyTitle> <EmptyDescription> You haven't created any projects yet. Get started by creating your first project. </EmptyDescription> </EmptyHeader> <EmptyContent> <div className="flex gap-2"> <Button>Create Project</Button> <Button variant="outline">Import Project</Button> </div> </EmptyContent></Empty>import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from "@/registry/optics/empty";import { Button } from "@/registry/optics/button";import { FolderCode } from "lucide-react";<Empty> <EmptyHeader> <EmptyMedia variant="icon"> <FolderCode /> </EmptyMedia> <EmptyTitle>No Projects Yet</EmptyTitle> <EmptyDescription> You haven't created any projects yet. Get started by creating your first project. </EmptyDescription> </EmptyHeader> <EmptyContent> <div className="flex gap-2"> <Button>Create Project</Button> <Button variant="outline">Import Project</Button> </div> </EmptyContent></Empty>Installation
pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/empty.json
Props
<Empty />
Name
Type
className
string