Display when there is no content to show. Guides users toward their first action.
| Name | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | Icon element (React node preferred, emoji string supported) |
| titlerequired | string | — | Main title text |
| description | string | — | Optional description text |
| size | "default" | "compact" | default | Size variant (compact for constrained spaces) |
| action | EmptyStateAction | — | Primary action button ({ label, onClick?, href?, variant? }) |
| secondaryAction | EmptyStateAction | — | Secondary action button ({ label, onClick?, href?, variant? }) |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Title Color | color.foreground | var(--foreground) | Title text color | |
| Description Color | color.muted-foreground | var(--muted-foreground) | Description text color | |
| Icon Color | color.muted-foreground | var(--muted-foreground) | Icon color (for React nodes) | |
| Title Size | fontSize.lg/xl | 1.125rem/1.25rem | Responsive title size | |
| Description Size | fontSize.sm/base | 0.875rem/1rem | Responsive description size | |
| Padding | spacing.8/12 | 2rem/3rem | Container padding | |
| Gap | spacing.4 | 1rem | Content gap |
EmptyState consists of an icon, title, description, and optional action buttons.
Your projects will appear here once you create them.
Get started by creating your first document.
<EmptyState
icon={<FolderOpen className="h-12 w-12" strokeWidth={1.5} />}
title="No projects"
description="Your projects will appear here once you create them."
action={{
label: 'Create Project',
onClick: () => console.log('Create'),
}}
/>Add a secondary action for alternative user paths.
Try adjusting your search or filters.
<EmptyState
icon={<Search className="h-12 w-12" strokeWidth={1.5} />}
title="No results"
description="Try adjusting your search or filters."
action={{
label: 'Search Again',
onClick: () => console.log('Search'),
}}
secondaryAction={{
label: 'Clear Filters',
onClick: () => console.log('Clear'),
}}
/>Use compact for constrained spaces like sidebars or cards.
Items will appear here once added.
Items will appear here once added.
<EmptyState size="compact" icon={...} title="No items" />Style icons with colors for emphasis on error or warning states.
Default muted color for general empty states.
Use color for emphasis on error or warning states.
<EmptyState
icon={<TriangleAlert className="h-12 w-12 text-destructive" strokeWidth={1.5} />}
title="Error occurred"
description="Something went wrong."
/>