No search results
A search narrows piece by piece until nothing is left.
Not quite it? Ask for a variation
Install
Writes one React component into components/illos. Nothing else to install.
npx shadcn@latest add https://illos.dev/r/flat/no-search-results.jsonOr hand it to your agent
Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.
How it moves
- a search with a query typed in shows no results.
- a click on clear brings every result back.
- a new query narrows the list until none is left.
Where it fits
For any product with search: the screen a search shows when nothing matches, the empty state of a filtered list, or the docs page on search. Clearing the query brings every result back and typing again narrows them to none, so the picture says the search worked and the words beside it can offer to clear it. As a spot it fits above a heading such as No matching results and a Clear search button. It is free to copy and pairs with Search filters, Command menu and Empty search.
Pairs well with Search filters, Command menu and Empty search.
On your site
Read where product illustrations go, how to place an animated SVG and how to keep animations fast.
For developers
- File size
- 3.6 KB gzipped
- Motion
- Plays once, 3.3 s, then holds
- Reduced motion
- Shows a still
- File
- no-search-results.svg