Skip to content

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

Free

Empty with Description Empty State for React

An empty state with an inbox icon, the title Nothing here yet, and one sentence about creating an item.

An inbox icon in a small tile, the title Nothing here yet, and one sentence about creating the first item. There is no button.

Start here when a sentence is enough. Add a Button when the reader can fill the list in one step. In React, Base UI only draws the message.

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 variant="icon">
      <InboxIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>Nothing here yet</EmptyTitle>
    <EmptyDescription>
      Get started by creating your first item.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

FAQ

Which parts does this empty state use?

EmptyHeader only. EmptyMedia with variant="icon" holds InboxIcon, EmptyTitle is "Nothing here yet", and EmptyDescription is "Get started by creating your first item."

How long is the description?

One sentence, in EmptyDescription, which is muted. There is no second paragraph and no EmptyContent.

How do I change the inbox icon?

Replace InboxIcon inside EmptyMedia. Keep variant="icon" for the same tile.

How do I add a button under the sentence?

Add EmptyContent after EmptyHeader and put a Button in it. This demo stops at the description.

Can the title be a real heading?

EmptyTitle is text. If this state belongs in the page outline, put a heading element in the header and keep the short message there.

What gets read after the title?

EmptyDescription, as the next text in the header. Hide InboxIcon with aria-hidden, because the title already says there is nothing here.

API Reference

Empty

Sets variant="icon". The rest is on the Empty page.

All 22 empty state examples