Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Empty without Icon Empty State for React

A text-only empty state with a title and a description and no icon.

Framework
UI library

Not every empty state needs a picture. This one is a title and a description in EmptyHeader, with no EmptyMedia. Use it in compact panels or text-heavy layouts where an icon would add noise.

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 the text-only empty state use?

EmptyHeader with EmptyTitle "No content available" and EmptyDescription "There's nothing to display at the moment. Please check back later." There is no EmptyMedia.

How do I add an icon later?

Put EmptyMedia first inside EmptyHeader, with variant="icon" and an icon. This file leaves that part out, so the header is the two text lines.

How do the title and description differ?

EmptyTitle uses the heading font. EmptyDescription is muted. Both are centered, and the header caps the line length at max-w-sm.

Is there a button?

No. There is no EmptyContent. Add one after the header when the state needs an action.

Is the title a heading element?

EmptyTitle is text. Add a real heading in the header if this state should be in the page outline.

What does a screen reader hear?

The title, then the description. With no icon, there is no graphic to hide.

All 22 empty state examples