Empty

Composition preview

Try Empty alongside its related feedback & loading components. These examples keep all actions local.

Usage

import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent } from "@/components/ui/empty";
import { Button } from "@/components/ui/button";

<>
<Empty>
  <EmptyHeader><EmptyTitle>No drafts yet</EmptyTitle><EmptyDescription>Create your first draft.</EmptyDescription></EmptyHeader>
  <EmptyContent><Button>Create draft</Button></EmptyContent>
</Empty>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent

Usage & accessibility

Distinguish no data from no filter matches. Keep one obvious next action.

Implementation contract

src/components/ui/empty.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.