Shadcn Empty

Empty is a centered zero-data block: media, a title, a short reason, and a next step. Use it when a list, a search, or a panel has nothing to show. It is layout only — you write the copy and wire the action.

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create your first project to get started.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>

variant="icon" is the muted tile. Leave it off for an avatar or an illustration.

Composition

EmptyContent is buttons, an input, or a link.

Outline

border on Empty. The root already has border-dashed — add the width so the box shows.

Background

bg-muted/30 or a bg-gradient-*. Same parts, a filled panel instead of a dashed edge.

Avatar

EmptyMedia default plus an Avatar. Use it when the empty thing is a person, not a folder.

Avatar Group

Several faces in the media slot. Overlap them — this is a team with nobody on it yet.

InputGroup

Drop an Input Group in EmptyContent when the next step is search, not create.

RTL

Wrap with DirectionProvider and dir="rtl". Copy is Arabic; the arrow uses data-icon="inline-end".

API

EmptyMedia

EmptyHeader, EmptyTitle, EmptyDescription, and EmptyContent take className. Links inside EmptyDescription get an underline.

Notes

Let Empty fill the same region the list would — a tiny message in a tall card looks broken.

With other components

Questions

Related