Back to Dictionary
Empty & Error States
●○○Ready to Use
Empty State Illustration
A softly animated graphic (like a floating ghost or swaying box) accompanied by friendly text suggesting the next action when a list or dashboard is empty.
Live Demo
No projects found
Start by creating a new one to organize your work.
What It Is
A softly animated graphic (like a floating ghost or swaying box) accompanied by friendly text suggesting the next action when a list or dashboard is empty.
✓When to Use
- New user unpopulated dashboards
- Empty inboxes or task lists
- Cleared notifications
✕When NOT to Use
- Brief loading states
Configuration Tips
- 01Apply a slow, continuous vertical floating animation to the illustration (y: -5 to 5 over 3s)
- 02Include a prominent Call-to-Action button to help users populate the space
You've Seen It In
NotionDropboxLinear
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a beautiful empty state component with a softly floating icon for when a user has no projects yet.
Code Example (Tailwind CSS)
export function EmptyStateIllustrationDemo() {}