Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Search

Try Different Keywords Empty State for React

An empty search state with a larger search icon and a longer hint to try other keywords or browse categories.

Framework
UI library

A search with no results that says more about what to do. The search icon sits straight in EmptyMedia at size-8, larger than an icon tile, and the description runs to two sentences: try other keywords, check the spelling, or browse the categories. Use it where search is the main way in, such as a large catalog or a help center.

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

Why is the search icon size-8?

EmptyMedia has no variant, so it does not draw the icon tile. SearchIcon sets size-8 and text-muted-foreground itself.

What does the longer description say?

EmptyTitle is "No results for your search". EmptyDescription is two sentences: try different keywords or check the spelling, then browse categories to find what you need.

What changes if I set variant icon?

variant="icon" draws the icon tile and sizes an unsized glyph. This demo leaves the variant off so size-8 on SearchIcon is the size you see.

Will the two sentences stay narrow?

EmptyHeader caps the text at max-w-sm and centers it. EmptyDescription is muted.

Should the search icon be hidden?

Yes. The title already says there are no results. Set aria-hidden on SearchIcon.

All 22 empty state examples