Skip to content

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

Free

Empty with Long Description Empty State for React

An empty product list titled No products available, with a package icon and a two-sentence explanation.

A package icon, the title No products available, and two sentences: this category is empty, so check back or browse other categories.

Use it when people need the reason, not just the title. If they can add a product, put that on a Button. In React, Base UI does not explain the empty category.

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">
      <PackageIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>No products available</EmptyTitle>
    <EmptyDescription>
      There are no products in this category yet. Check back later or browse
      other categories to discover what we have to offer.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

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.

API Reference

Empty

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

All 22 empty state examples