shadcn.io is an independent project built on shadcn/ui
A large open-folder icon, the title This folder is empty, and a line about adding files or creating folders. There is no button.
Use it when the empty area is the whole page. A compact panel can use the smaller icon tile on Empty. In Vue, Ark UI does not add the files.
Installation
Anatomy
Usage
<Empty>
<EmptyHeader>
<EmptyMedia>
<FolderOpenIcon aria-hidden="true" class="size-16 text-muted-foreground" />
</EmptyMedia>
<EmptyTitle>This folder is empty</EmptyTitle>
<EmptyDescription>
Start by adding files or creating new folders.
</EmptyDescription>
</EmptyHeader>
</Empty>FAQ
How is the folder icon made large?
FolderOpenIcon has className="size-16 text-muted-foreground". EmptyMedia has no variant, so the default slot does not restyle that size.
What would variant icon do here?
variant="icon" draws the small icon tile and sizes an icon that has no size class. This demo leaves the variant off and sets size-16 on FolderOpenIcon.
What does the empty folder say?
EmptyTitle is "This folder is empty". EmptyDescription says to start by adding files or creating new folders.
Why is the icon muted?
text-muted-foreground is on the icon. The title keeps the default foreground, so the sentence reads darker than the glyph.
API Reference
Empty
No extra props in this demo. The rest is on the Empty page.
