Empty State
A centered empty-state panel with a dashed border, optional icon chip, title, description, and an optional action slot.
Default
No files yet
Upload your first file to get started. Supported formats include PDF, PNG, and JPEG.
Compact
Inbox is empty
New notifications will appear here.
Error State
Something went wrong
We couldn't load your data. This might be a temporary issue — please try again.
Minimal
No results found
No Icon
Nothing here yet
Once you add some items they'll show up here. Get started by creating your first one.
Search No Results
No results for "webhooks"
Try adjusting your search or check for typos.
With Multiple Actions
Your workspace is empty
Invite teammates or create your first project to start collaborating.
Installation
npx shadcn@latest add @byronwade/empty-stateProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Primary heading text displayed in the empty state. |
| icon | LucideIcon | undefined | Optional Lucide icon component rendered in a small rounded chip above the title. |
| description | string | undefined | Optional muted helper text rendered below the title. |
| action | React.ReactNode | undefined | Optional action element (e.g. a button) rendered below the description. |
| className | string | undefined | Additional class names merged onto the root container. |