Search results

The page after the search. Found words marked, tabs per type, filters with counts, instant suggestions and an empty result that still helps.

5 variants

Switch category

List with tabs

One list of results with the found words marked. Tabs per type with counts, more results on demand.

Open in Studio

Installv1.0.1

aiw add @ai-website/search-results

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="list" query="oak table" results={…} types={…} action="/search" />

Source

Grouped

The best three of every type, each group with a link to all. The search and the groups stay on the left.

Open in Studio

Installv1.0.1

aiw add @ai-website/search-results

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="grouped" query="…" results={…} types={…} />

Source

With filters

Facets with live counts, active filters as chips, sorting. On phones the filters open in place.

Open in Studio

Installv1.0.1

aiw add @ai-website/search-results

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="with-filters" query="…" results={[{ …, facets: { wood: "oak" } }]} facets={…} />

Source

Instant search

Suggestions while typing, arrow keys to move and Enter to open. Empty, it shows recent and popular searches.

Open in Studio

Installv1.0.1

aiw add @ai-website/search-results

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="instant" results={…} types={…} recent={[…]} popular={[…]} />

Source

No results

An empty result that still leads on. A spelling suggestion, popular searches and three ways forward.

Open in Studio

Installv1.0.1

aiw add @ai-website/search-results

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="no-results" query="…" suggestion="…" popular={[…]} links={[…]} />

Source

Details

What Search results brings along, read from the registry and the source.

Area: Content
Variants: 5
Version: 1.0.1 · since 1.0.0
File: components/ui/search-results.tsx
Brings along: utilskitbutton iconrevealmotionsection
npm packages: None
Languages: English and German, 27 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The SearchResultsProps interface from components/ui/search-results.tsx, with the comments from the code.

variantoptional
SearchResultsVariant
listgroupedwith-filtersinstantno-results
queryoptional
string
The words searched for
resultsoptional
SearchResult[]
typesoptional
SearchType[]
Tabs and groups, in this order
facetsoptional
SearchFacet[]
with-filters: the facets
pageSizeoptional
number
list: how many results show before "Show more"
suggestionoptional
string
no-results: a corrected query
popularoptional
string[]
no-results, instant: popular searches
recentoptional
string[]
instant: searches of this visitor
linksoptional
{ icon: IconName; title: string; text: string; href: string }[]
no-results: ways forward
actionoptional
string
Where the form sends the query (GET, field q)
onSearchoptional
(query: string) => void
Called with the query instead of sending the form

Built-in texts

Search results writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 27 texts

Key	English	German
search	English Search	German Suchen
placeholder	English Search the site	German Website durchsuchen
clear	English Clear search	German Suche leeren
results	English {n} results for “{q}”	German {n} Ergebnisse für „{q}“
result	English 1 result for “{q}”	German 1 Ergebnis für „{q}“
all	English All	German Alle
showMore	English Show more results	German Weitere Ergebnisse zeigen
loading	English Loading	German Wird geladen
shown	English Showing {a} of {b}	German {a} von {b} angezeigt
viewAll	English All {n} in {type}	German Alle {n} in {type}
filters	English Filters	German Filter
clearFilters	English Clear all	German Alle entfernen
sort	English Sort by	German Sortieren nach
relevance	English Relevance	German Relevanz
az	English Title A to Z	German Titel A bis Z
remove	English Remove filter {f}	German Filter {f} entfernen
noMatch	English No result matches these filters. Remove one to see more.	German Kein Ergebnis passt zu diesen Filtern. Entferne einen, um mehr zu sehen.
noneTitle	English Nothing found for “{q}”	German Nichts gefunden für „{q}“
noneText	English Check the spelling, try a shorter or a more general word, or start from one of the ways below.	German Prüf die Schreibweise, versuch ein kürzeres oder allgemeineres Wort oder starte mit einem der Wege unten.
didYouMean	English Did you mean	German Meintest du
popular	English Popular searches	German Oft gesucht
recent	English Recent searches	German Zuletzt gesucht
suggestions	English Suggestions	German Vorschläge
enter	English to open	German öffnen
move	English to move	German bewegen
close	English to close	German schließen
noneInstant	English No direct match. Press Enter to search everything for “{q}”.	German Kein direkter Treffer. Mit Enter durchsuchst du alles nach „{q}“.

Read from the source of the component.

Search results handles the keys Escape, Enter, Arrow up, Arrow down and Space itself.
Sets aria-controls, aria-expanded, aria-label, aria-labelledby and aria-selected, so screen readers announce purpose and state.
Uses the roles listbox, option, search, status, tab and tablist.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Search results?

With aiw add @ai-website/search-results. The command puts components/ui/search-results.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, motion and section. It needs no further npm packages.

Which variants does Search results have?

5 variants, List with tabs, Grouped, With filters, Instant search and No results. You pick one with the variant prop, for example variant="grouped".

Can I translate the texts of Search results?

Yes. Search results carries 27 texts of its own in English and German, such as “Search”, “Search the site” and “Clear search”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Search results?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Search results with aiw_components and install it with aiw_add @ai-website/search-results. Name the variant in your prompt, for example variant="list", and the assistant writes your content straight into the props.

Can I adjust Search results without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching SearchResults code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Search results on a page.

Search results

List with tabs

Grouped

With filters

Instant search

No results

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with