Empty states
Stands in for content that is not there: one EmptyState export with eleven parts and six kinds of art. Three sizes, no states or breakpoints of its own.
Empty states
Stands in for content that is not there: one EmptyState export with eleven parts and six kinds of art. Three sizes, no states or breakpoints of its own.
Demo
Pick a composition, size, and pattern, then copy the result. The composition is children — the snippet is the assembly.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
One root, eleven parts
EmptyState owns the size and hands it to every part through context. Header holds the art and reads the types of its direct children to pick its spacing, Content holds the Title and Description, and Footer is a bare row for your buttons. The copied snippet carries all of it, because no single element reproduces what the preview shows.Contextual demo
An empty state stands in for something, so the thing it replaces is most of the argument. Three of them in real screens.
The command menus are a consumer
size="sm", a gray featured icon, no pattern, and className="overflow-hidden p-6 pb-10" on the root. The command menus page shows it live inside a real menu.The family
One export, eleven parts, one file. Six of the parts are art; the other five are the frame, the copy, and the buttons.
| Component | Description | Import from |
|---|---|---|
| EmptyState | The root: a centered column capped at 512px, and the size every part below reads through context. A section element since 2026-08-23. | @/components/application/empty-state/empty-state |
| EmptyState.Header | The art slot. Reads the types of its direct children to pick its spacing, and draws an optional background pattern behind them. | @/components/application/empty-state/empty-state |
| EmptyState.FeaturedIcon | The foundations FeaturedIcon with the sheet’s defaults seated: gray, modern, a search glyph, sized from the root. | @/components/application/empty-state/empty-state |
| EmptyState.Illustration | One of five drawings, cloud, box, documents, credit card, or the DrumKit-authored folder, sized from the root. The first four carry a blurred icon disc; the folder draws none. | @/components/application/empty-state/empty-state |
| EmptyState.FileTypeIcon | A 40px file icon on a 104px gradient disc, with the sheet’s circle pattern behind it. | @/components/application/empty-state/empty-state |
| EmptyState.Content | The text block, capped at 352px: Title then Description, with the gap and the margin below set by the size. A div since 2026-08-23. | @/components/application/empty-state/empty-state |
| EmptyState.Title | The heading, an h1 at 16, 18, or 20px semibold. There is no as prop. | @/components/application/empty-state/empty-state |
| EmptyState.Description | The body copy, centered, at 14px, or 16px at lg. | @/components/application/empty-state/empty-state |
| EmptyState.Footer | A bare flex row with a 12px gap. The buttons, and their sizes, are yours. | @/components/application/empty-state/empty-state |
| EmptyState.AvatarRadius | Five concentric rings in a 480px box behind the header, with up to nine avatars on fixed slots. Absolutely positioned, so the header makes room with 64px above and below. | @/components/application/empty-state/empty-state |
| EmptyState.AvatarRow | Four avatars each side of whatever you put between them, usually the FeaturedIcon, shrinking away from the center. | @/components/application/empty-state/empty-state |
| EmptyState.AvatarGrid | Two marquee rows of tiles that stand in for the header art entirely: the sheet’s Integrations type has no featured icon. | @/components/application/empty-state/empty-state |
Built from
Six pieces make up the family; three have their own docs page.
Component | Where it’s used here |
|---|---|
| FeaturedIcon | EmptyState.FeaturedIcon wraps the foundations component with the sheet’s defaults seated: color gray, theme modern, SearchLg, and a size read from the root, lg at sm and md and xl at lg. |
| FileIcon | EmptyState.FileTypeIcon draws one from @untitledui/file-icons at 40px on its gradient disc; type and theme pass through as the icon’s type and variant. |
| @untitledui/icons | SearchLg, the default glyph in the featured icon and on the cloud drawing; UploadCloud02 on box and documents; AlertCircle on the credit card. |
The variant space
All eight of the sheet’s icon types plus Illustration’s four styles: eleven live compositions, all at size sm.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No results found
Your search “Landing page design” did not match any projects. Please try again.
No files uploaded
Upload your first file to get started. PNG, JPG, or PDF up to 10 MB.
No documents yet
Documents you create or import will show up here, newest first.
No payment method
Add a card to keep your workspace active when the trial ends on 30 September.
No files found
Your search did not match any files. Try a different name, or upload a new one.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No users found
Your search did not match any users.
Invite your first user
Add your team members and external users.
No integrations found
We couldn’t find any apps or commands. Please try again or browse all apps.
The two folder types, closed 2026-08-28
FolderIcon, the sheet’s bare 54×48 glyph, constant across all three sizes, with pattern="grid" behind it — the kit’s grid draws 480px at a 48px pitch, lines only, where the sheet’s draws 640 at 42.7 with scattered fills, which stays recorded on the Code tab. Folder icon transparent is the family’s authored illustration, <EmptyState.Illustration type="folder" />: the sheet’s own flattened export at 80/96/112, minus its 10% noise overlay and backdrop blur, with the header’s gap pulled to the sheet’s 12/16/20 by a className the cells above pass.The featured icon follows the root, not the composition
EmptyState.FeaturedIcon is 48px at an sm or md root and 56px at lg, wherever it sits. The sheet draws it at 40/48/48 inside Users radius and 48/56/56 inside Users row, and the kit has no composition axis, so the two cells above pass size where the sheet and the default differ: size="md" inside the radius at sm, size="lg" inside it at lg, and size="xl" inside the row at md. Nothing to pass at the other three. The glyph moves once too, read 2026-08-28: the sheet draws a users-plus inside Users row where the wrapper defaults SearchLg, so that cell passes icon={UsersPlus}; everywhere else the search default is the sheet’s.The spacing changes with the art
AvatarRow or an AvatarGrid, and with an AvatarRadius present it drops its margin and takes 64px of padding above and below, so the rings center on the icon instead of overlapping the copy. The header detects the art by reading its direct children’s types, so the art has to be a direct child.Sizes
Three sizes on the root, and nothing else takes one — everything follows it through context. The buttons are yours.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No results found
Your search “Landing page design” did not match any projects. Please try again.
Size moves the type, the icon, and the gaps together
Button at the matching size: 36, 40, and 44px tall. All of it matched the sheet in the 2026-08-23 parity read.No states, and no breakpoints
w-full up to 512px and the copy wraps at 352px; a container narrower than that narrows both.Background patterns
Four drawings behind the art, centered and hidden from assistive tech. Off by default since 2026-08-23.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
Off by default since 2026-08-23
Header used to default pattern to circle, so every empty state in the kit painted 480px of rings behind its icon. The sheet draws a pattern on its File type icon and Folder icon types only, which the Featured icon sm screenshot confirmed, and the command-menu sheet’s own empty state draws none either; the ten call sites in this repo, nine command-menu files and the command menus docs config, all rendered the Featured icon composition and relied on the default. It is none now, and pattern="circle" is one prop where the sheet wants it. Measured 2026-08-23 against a production build: the only pattern SVGs on this page are the five behind File type icons.