Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Simple Empty State for React

A minimal empty state with a file question icon and a title only.

Framework
UI library

The smallest empty state: a file question icon in the icon tile and the title No items found, with no description and no action. Use it when the context already explains why the list is empty, such as a side panel or a widget.

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

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.

All 22 empty state examples