Skip to content

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

Free

Simple Empty State for React

A minimal empty state with a file question icon and the title No items found, and nothing else.

A file question icon in a small tile and the title No items found. There is no description and no button.

Use it in a widget where the screen around it already explains the list. If people need a next step, add one on a Button. In React, Base UI does not know why the list is empty.

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">
      <FileQuestionMarkIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>No items found</EmptyTitle>
  </EmptyHeader>
</Empty>

FAQ

What does the simple empty state render?

EmptyHeader with EmptyMedia variant="icon" around FileQuestionMarkIcon, and EmptyTitle "No items found". There is no EmptyDescription and no EmptyContent.

How is the icon sized?

FileQuestionMarkIcon has no size class. variant="icon" draws the tile and sizes that unsized icon. The part sets data-variant="icon".

How do I add a sentence under the title?

Add EmptyDescription after EmptyTitle, still inside EmptyHeader. This demo stops at the title.

How do I add an action?

Add EmptyContent after the header and put a Button in it.

Can No items found be a heading?

EmptyTitle is text, not a heading element. Use a heading in the header when the state should show up in the page outline.

What gets announced?

The title "No items found". Mark FileQuestionMarkIcon aria-hidden so the icon is not announced as well.

API Reference

Empty

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

All 22 empty state examples