Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Search

No Filter Results Empty State for React

An empty state for filters that match nothing, with a filter icon and a Clear Filters button.

Framework
UI library

A filtered list that came back empty, with the one fix most readers want. A filter icon, the title No items match your filters and a short hint sit above an outline Clear Filters button. Use it above a data table, a product grid or any list with filters.

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

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.

All 22 empty state examples