Says what is missing and offers the one next step. Eight kinds, from a drop area to a 404.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/emptyPlayground
Your cloud is empty
Upload files to keep them in sync across every device.
Outline
Your cloud is empty
Upload files to keep them in sync across every device.
Background
You’re all caught up
New notifications will show up here.
Avatar
Lena is offline
Leave a message and she’ll get it when she’s back.
Avatar group
Only you are here
Invite people to work on this project with you.
Not found
404
Page not found
The page you’re looking for doesn’t exist. Try searching for it.
Projects
No projects yet
Start a new project or bring one in from another tool.
No results
No results for “brand kit”
Check the spelling, or try one of these.
Error
Couldn’t load your files
Something went wrong on our side. Your files are safe.
Container
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/empty
Accessibility
- Media is decorative unless it is a person.
- The title is a heading: set
levelto fit the page. - Move focus to the main action when an empty state replaces content.
Motion
- The body fades and rises 8 px over 320 ms, then everything stays still.
- Ghost tiles open like a hand of cards in 400 ms.
- Text and actions fade in 40 ms apart.
- In the Outline drop area, dashes turn to ink and the tile lifts 4 px during a drag.
- With reduced motion, it only fades and the fan is already open.
Responsive behavior
- 520 px on Web and 358 px on Mobile.
- On Mobile, actions stack at full width with the primary first.
Performance
- A plain section with no Motion. The staggered entrance is CSS, driven by an order variable.
- Drag handlers attach only on Outline with onFiles.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Empty, EmptyFan, EmptyCode and EmptyChip. Props: container (card, background, outline), media, title, description, level, actions, footer, onFiles.
- media takes Empty Fan, an Avatar, an Avatar Group or Empty Code. Set level to fit the page's headings.
- onFiles works on Outline only and receives the dropped files.
- Demo buttons, links and the search field are static. Retry is a timer.
Related
AlertComponentA callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.SkeletonComponentA placeholder in the shape of content on its way, so nothing jumps when it arrives.Data TableComponentSort, search, filter, page and act in bulk on one set of records, with Data Table Header and Table Toolbar on the tray.