Empty State
ui / feedback
Empty, no-results and failed-to-load states with actions, in two sizes.
- type
- ui
- files
- 1
- registry deps
- none
- npm deps
- none
installs
- components/ui/empty-state.tsx
- Separate empty, no-results and error messages
- Error variant announces itself with role=alert
- Compact size fits inside a card or table body
Three variants because they are three different messages: default for nothing created yet, search for filters that matched nothing, error for a load that failed (rendered with role="alert").
Variations
one state per section
Nothing created yet
The first-run case: name the thing, say what happens next, give one primary action.
No projects yet
Projects hold your deployments, members and billing usage.
No results
A different message from “nothing exists”: the fix is clearing filters, so that is the action.
No projects match “invoice”
Try a shorter query, or clear the status filter.
Failed to load
Rendered with role="alert" and destructive tone, because a failed fetch is not an empty list.
Could not load projects
The request timed out after 30 seconds.
Compact
size="sm" for a table body or a card, where the full-height version would push the layout around.
Recent activity
Nothing in the last 30 days