Empty State
Empty state components styled as Tinted Trays. These provide visual feedback when content is not available or lists are empty.
Animated Empty - Inbox
SVG animation using framer-motion for a polished empty inbox state.
Your inbox is empty. When you receive new messages, they will appear here.
Animated Empty - Search
Animated search empty state with magnifying glass drawing effect.
We could not find anything matching your search. Try using different keywords.
Animated Empty - Folder
Animated folder empty state with progressive reveal.
Upload files or create new folders to organize your content.
Basic Empty State
A simple empty state with icon, title, and description inside a tray container.
Your inbox is empty. When you receive new messages, they will appear here.
Inverted Canvas
Tinted canvas block with a white empty-state surface.
This is the inverted mode: tinted canvas outside, white surface inside.
With Action Button
Empty state with a call-to-action button.
Get started by creating your first document. Documents help you organize your work.
No Notifications
Minimal empty state for notifications panel.
You have no new notifications. Check back later for updates.
Simple Text
Minimal empty state with just text content.
Content will appear once data is available.