Enhanced Empty State
A beautiful, animated empty state component with floating icons, background glow effects, staggered animations, optional CTA button, and quick-start suggestion badges. Respects reduced-motion preferences.
Installation
$ npx shadcn@latest add @orecus/enhanced-empty-stateDependencies:
motionlucide-react
Registry:
@orecus/enhanced-buttonbadge@orecus/use-reduced-motion@orecus/color-utils
Component
Empty states with floating icons, CTAs, and suggestions for guiding users.
No items found
Get started by creating your first item or explore the suggestions below.
Or try one of these:
Quick StartImport DataExplore Templates
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Main title text |
description | string | — | Optional description text below the title |
icon | LucideIcon | — | Main central icon displayed in the animated composition |
floatingIcons | FloatingIconConfig[] | — | Array of floating icons around the main icon with position, color, and icon properties |
cta | CTAConfig | — | Optional CTA button configuration with label, onClick, icon, variant, size, and disabled properties |
suggestions | SuggestionConfig[] | — | Optional quick-start suggestions displayed as clickable badges |
suggestionsLabel | string | — | Optional label for suggestions section |
className | string | — | Additional CSS classes for the container |