Empty State
Placeholder components for empty content areas with helpful guidance
Default Empty State
Basic empty state with icon, title, description, and action
No projects yet
Create your first project to start organizing your work.
Preset Variants
Built-in variants for common empty state scenarios
No results found
Try adjusting your search or filter to find what you're looking for.
No data available
There's no data to display at the moment.
No team members
Invite people to collaborate with you.
All caught up!
You have no new notifications.
Search Results
Specialized component for empty search results
No results for "design system"
Try adjusting your search terms or filters.
Size Variants
Three sizes to fit different container contexts
Small
No items
Add your first item.
Medium (default)
No items
Add your first item to get started.
Large
No items
Add your first item to get started with your collection.
Custom Icons
Override the default icon with any Lucide icon
No AI suggestions
Start typing to get AI-powered recommendations.
No cloud files
Upload files to access them anywhere.
No messages
Start a conversation.
With Actions
Primary and secondary action buttons
No team members
Invite colleagues to collaborate on this project.
Usage
Basic implementation examples
import { EmptyState, SearchEmptyState } from '@/components/ui/empty-state'
// Basic usage
<EmptyState
title="No projects"
description="Create your first project"
action={{ label: "Create", onClick: handleCreate }}
/>
// Using a preset variant
<EmptyState variant="search" />
<EmptyState variant="no-data" />
<EmptyState variant="no-users" />
<EmptyState variant="no-notifications" />
<EmptyState variant="no-events" />
// Search results helper
<SearchEmptyState
query={searchQuery}
onClearSearch={() => setQuery('')}
/>
// Custom icon and size
<EmptyState
size="lg"
icon={<Sparkles className="w-16 h-16 text-indigo-400" />}
title="No AI suggestions"
description="Start typing to get recommendations."
/>API Reference
EmptyState component props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'search' | 'no-data' | ... | 'default' | Preset configuration |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the component |
| title | string | Variant default | Heading text |
| description | string | Variant default | Supporting text |
| icon | ReactNode | Variant default | Custom icon |
| action | { label, onClick, variant? } | - | Primary action button |
| secondaryAction | { label, onClick } | - | Secondary action button |
Features
Built-in functionality
- 8 preset variants - Common empty state scenarios
- 3 sizes - Small, medium, and large
- Custom icons - Override with any icon
- Action buttons - Primary and secondary actions
- SearchEmptyState helper - Specialized for search results
- Fully customizable - Override any text or styling