Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Empty with Long Description Empty State for React

An empty product list with a package icon and a two-sentence description.

Framework
UI library

An empty state that explains itself. A package icon and the title No products available sit above a two-sentence description: the category is empty, so check back or browse others. Use it when the reader needs the why as well as the what.

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

How is the long description written?

One EmptyDescription holds two sentences: there are no products in this category yet, then check back later or browse other categories. There is no br between them.

Which icon does it use?

PackageIcon in EmptyMedia with variant="icon". The title is "No products available".

Does the longer text stay readable?

EmptyHeader limits the block to max-w-sm and centers it. EmptyDescription is muted.

How do I put the sentences on separate lines?

Add a br inside the same EmptyDescription. This demo leaves both sentences in one paragraph.

Is browse other categories a link?

No. It is text in the description. There is no EmptyContent and no anchor in this file.

Will both sentences be read?

Yes. They are one description, read after the title. Hide PackageIcon with aria-hidden.

All 22 empty state examples