Skip to content

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

Free

No Search Results Empty State for Solid

An empty search state titled No results found, with a search icon and a hint to try other keywords.

UI library: Ark UI

A search icon, the title No results found, and a description that says to try different keywords. There is no button.

Use it under a search field when the query matched nothing. While results are still loading, show a Skeleton. In Solid, Ark UI does not run the search.

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">
        <SearchIcon aria-hidden="true" />
      </EmptyMedia>
      <EmptyTitle>No results found</EmptyTitle>
      <EmptyDescription>
        We couldn't find anything matching your search. Try different keywords.
      </EmptyDescription>
    </EmptyHeader>
  </Empty>;

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.

API Reference

Empty

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

All 22 empty state examples