Patterns · Application UI
Empty State
A centered empty-state panel with a dashed border, optional icon chip, title, description, and an optional action slot.
Feature showcase
Installation
Features
7 examples
Default, Compact, Error State, Minimal, No Icon, Search No Results, With Multiple Actions.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Primary heading text displayed in the empty state. |
| icon | Icon | undefined | Optional Phosphor 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. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/empty-state.tsx |
| Default example | content/examples/empty-state/default.tsx |
| Compact example | content/examples/empty-state/compact.tsx |
| Error State example | content/examples/empty-state/error-state.tsx |
| Minimal example | content/examples/empty-state/minimal.tsx |
| No Icon example | content/examples/empty-state/no-icon.tsx |
| Search No Results example | content/examples/empty-state/search-no-results.tsx |
| With Multiple Actions example | content/examples/empty-state/with-multiple-actions.tsx |