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.
Usage
The import and the props worth knowing about, in one place.
import { Search24 } from "@/components/beste/piece/search24";
<Search24
surface="card"
bordered={true}
inverted={false}
query="rowan"
groupLabel="Members"
results={[
{
"title": "Rowan Blake",
"meta": "Active · Clinic 2",
"kind": "Member"
},
{
"title": "Rowan Blake · Intake notes",
"meta": "Updated 3 days ago",
"kind": "Document"
},
{
"title": "Invoice #4821",
"meta": "Rowan Blake · Paid",
"kind": "Billing"
}
]}
footer="3 of 11 matches shown"
/>More Search pieces
View all SearchGrouped Results
Command menu with two sectioned buckets of results, each prefixed by a category 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.
Command Palette
⌘K modal with a query bar, three typed results, and a keyboard-hint footer at the bottom.
Trending Queries
Search field followed by a row of trending query chips led by a small flame label.