Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Search

No Search Results Empty State for React

An empty state for a search with no results, with a search icon and a hint to try other keywords.

Framework
UI library

A search with no results, and a hint about what to try next. A search icon, the title No results found and a description suggesting different keywords make up the whole state, with no action. Use it under a search field in catalogs, docs or settings.

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

Does this empty state show the search term?

No. EmptyTitle is "No results found". EmptyDescription says nothing matched and to try different keywords. The term is not interpolated in this file.

Which icon does it use?

SearchIcon in EmptyMedia with variant="icon".

Is there a button?

No. The file stops at EmptyHeader. Add EmptyContent with a Button when you want a clear or browse action.

How long is the description?

One sentence in EmptyDescription. That part is muted. There is no second paragraph.

What does variant icon change?

It sets data-variant="icon" and draws the icon tile. SearchIcon has no size class, so the tile's icon rule sizes it.

How do I keep the icon decorative?

The title already says no results were found. Add aria-hidden on SearchIcon.

All 22 empty state examples