Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Search

No Matches Found Empty State for React

An empty state for a search with no matches that quotes the query and offers a View All Items button.

Framework
UI library

A search that found nothing, with a way back to everything. The title repeats the query, the description suggests checking the spelling, and a ghost View All Items button drops the search. Use it for scoped searches where an unfiltered list is a useful fallback.

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

Is the word query the visitor's search?

In this file it is literal text. EmptyTitle renders No matches found for "query", quotes included. Replace query with the string that was searched.

Which icon marks a failed match?

SearchXIcon is in EmptyMedia with variant="icon".

What does the description suggest?

EmptyDescription says to check spelling or search for something else. It is one sentence, with no link.

What variant is View All Items?

variant="ghost" on the Button in EmptyContent. There is no click handler on it here.

How do the quotes around the search text get there?

They are characters in the title string. EmptyTitle has no prop for a query. Put the real term between quotation marks in that string.

Will a screen reader read the quoted term?

Yes. The title is ordinary text, so the quoted term is part of the sentence. Hide SearchXIcon with aria-hidden when the title already says there are no matches.

All 22 empty state examples