Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Empty with Description Empty State for React

An empty state with an inbox icon, a title, and a one-sentence description.

Framework
UI library

The basic empty state: an inbox icon in the icon tile, a title, and one sentence that says what to do. EmptyHeader stacks the three and centers them. Start here and add an action when the reader can fix the emptiness in one step.

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

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.

All 22 empty state examples