Empty state
Tells the reader why a place is empty and what to do next. Neutral uses a dashed border; the tones turn it into a notice.
bunx --bun shadcn@4.17.0 add @waimakers/empty-state- npm dependencies
- lucide-react@1.33.0
From the registry
A centred title, description, icon and action for empty content. Neutral uses a dashed border; info, ok, attention and danger use solid borders and readable tone washes. RefusedState and ErrorState supply the distinct refusal and failure presets.
Examples
Neutral
The first-run case: say what will appear here and offer the action that makes it appear.
No agents yet
Agents you own or collaborate on appear here. Start from a template or build one from scratch.
Tones
Info, ok, attention and danger use a solid border on their wash.
First run on Monday
The weekly digest has not run yet.
All caught up
Every meeting has a summary.
Waiting for approval
Joost reviews new skills before they go live.
The calendar is disconnected
Reconnect it to see upcoming meetings.
No results
A filtered list with nothing in it. Offer the way back.
No skills match “invoice”
Try a shorter word, or clear the search to see all 38 skills.
Minimal
Title only, for small spaces like a card body.
No runs in the last 7 days