Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty with Large Icon Empty State for React

An empty folder titled This folder is empty, with a large open-folder icon and no action button.

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 React, Base UI does not add the files.

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

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <FolderOpenIcon
        aria-hidden="true"
        className="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.

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.

API Reference

Empty

No extra props in this demo. The rest is on the Empty page.

All 22 empty state examples