Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Empty with Large Icon Empty State for React

An empty folder with a large open-folder icon in place of an icon tile.

Framework
UI library

An empty folder with a big picture. The open-folder icon goes straight in EmptyMedia at size-16 in the muted text color, without the icon tile, above the title and a one-line description. Use it where the empty state fills a large area, such as a whole page or a main panel.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

Is there a button?

No. The file is EmptyHeader only. Add EmptyContent with a Button under the header when the folder needs an action.

Should a large icon be announced?

The size does not add meaning. The title says the folder is empty, so set aria-hidden on FolderOpenIcon.

All 22 empty state examples