Empty

PreviewCopy Anchor Link

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/empty.json

The preview also uses Button and Lucide.

UsageCopy Anchor Link

import { Empty, EmptyHeader, EmptyTitle } from '@/components/ui/empty';

<Empty>
  <EmptyHeader>
    <EmptyTitle>No archived projects</EmptyTitle>
  </EmptyHeader>
</Empty>

CompositionCopy Anchor Link

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

Start with a header and title. Add media and a description inside the header when they help explain the state. Place actions in the optional EmptyContent sibling. Add border to the root when the empty state needs a visible boundary.

AccessibilityCopy Anchor Link

Use a heading inside EmptyTitle when the empty state introduces a section. Hide decorative icons from assistive technology. Keep the static container out of the tab order and use links or buttons for actions. If filtering produces an empty result, announce the updated result count through a separate status region.

APICopy Anchor Link

All six parts render a div and accept standard div props, including className and ref. EmptyMedia also accepts variant="default" for unstyled media or variant="icon" for a muted icon tile.

Based on shadcn Empty.