Skip to content

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

Free

No Matches Found Empty State for Solid

An empty search state whose title says no matches were found for the query, with View All Items.

UI library: Ark UI

A search icon and a title that says no matches were found for the query. The description mentions spelling, and a ghost View All Items button sits under it.

Use it when dropping the query should show the full list. If there is no full list, skip the button and keep the message on Empty. In Solid, Ark UI does not clear the query.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <SearchXIcon aria-hidden="true" />
      </EmptyMedia>
      <EmptyTitle>No matches found for "query"</EmptyTitle>
      <EmptyDescription>
        Check your spelling or try searching for something else.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button variant="ghost">View All Items</Button>
    </EmptyContent>
  </Empty>

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.

API Reference

Empty

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

Button

Sets variant="ghost". The rest is on the Button page.

All 22 empty state examples