Brief Matches
A brief under a sweeping read, then the sections it matched landing one by one with their strength bars filling. Sits on a solid card or a frosted one, with or without its hairline, and inverts whole.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
A ceramics studio in Porto that runs weekend classes.
hero181Heroevent103Eventfeature287Featureimport { Search26 } from "@/components/beste/component/search26";
<Search26
brief="A ceramics studio in Porto that runs weekend classes."
matches={[{"id":"hero181","kind":"Hero","strength":3},{"id":"event103","kind":"Event","strength":3},{"id":"feature287","kind":"Feature","strength":2}]}
restLabel="24 more"
/>Usage
The import and the props worth knowing about, in one place.
import { Search26 } from "@/components/beste/piece/search26";
<Search26
brief="A ceramics studio in Porto that runs weekend classes."
scanningLabel="Reading the brief"
resultsLabel="matched"
matches={[
{
"id": "hero181",
"kind": "Hero",
"strength": 3
},
{
"id": "event103",
"kind": "Event",
"strength": 3
},
{
"id": "feature287",
"kind": "Feature",
"strength": 2
}
]}
restLabel="24 more"
surface="card"
bordered={true}
inverted={false}
stepMs={460}
/>More Search pieces
View all SearchResult Snippet
SERP-style card with a breadcrumb trail, linked title, and body snippet with highlighted terms.
Members
Rowan Blake
Active · Clinic 2
Rowan Blake · Intake notes
Updated 3 days ago
Invoice #4821
Rowan Blake · Paid
3 of 11 matches shown
Search Results Panel
A search panel showing a typed query above a labelled group of results, each with a title, a meta line, and a kind chip, closing on a match count.
Trending Queries
Search field followed by a row of trending query chips led by a small flame label.
Nina Simone
Vocals, piano
Miles Davis
Trumpet
Herbie Hancock
Keys
Joni Mitchell
Guitar, vocals
Erykah Badu
Vocals
Showing 3 of 5 results
Typing Search
A query gets typed out letter by letter while the list filters live, highlighting the matched text and collapsing rows that no longer fit, then clears and tries another search. Rows take a photo when one is given and fall back to initials.