Skip to content

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

Free

No Filter Results Empty State for Solid

An empty state titled No items match your filters, with a filter icon and a Clear Filters button.

UI library: Ark UI

A filter icon, the title No items match your filters, and a hint to adjust them. An outline Clear Filters button sits under the text.

Use it above a filtered list that came back empty. If the request failed, say so in an Alert instead of this placeholder. In Solid, Ark UI does not reset the filters.

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">
        <FilterIcon aria-hidden="true" />
      </EmptyMedia>
      <EmptyTitle>No items match your filters</EmptyTitle>
      <EmptyDescription>
        Try adjusting your filters to see more results.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button variant="outline">Clear Filters</Button>
    </EmptyContent>
  </Empty>

FAQ

What does the Clear Filters button use?

A Button with variant="outline" inside EmptyContent. It has no icon and no click handler in this file, so wire the reset yourself.

How is the filter icon shown?

FilterIcon sits in EmptyMedia with variant="icon". The button does not repeat the icon.

What is the message?

EmptyTitle is "No items match your filters". EmptyDescription says to adjust the filters to see more results.

Where do the title and description live?

Both are in EmptyHeader, under the media. EmptyTitle is the short line. EmptyDescription is the muted sentence under it.

How do I add a second action?

Put another Button next to Clear Filters and wrap the pair in a div with flex gap-2. EmptyContent will still center that row.

Does the button stay in the tab order?

Yes. Actions in EmptyContent are normal buttons, so Tab reaches Clear Filters. The filter icon can take aria-hidden, because the title already names the state.

API Reference

Empty

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

Button

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

All 22 empty state examples