Typing Search
Search people
Nina Simone
Vocals, piano
Miles Davis
Trumpet
Herbie Hancock
Keys
Joni Mitchell
Guitar, vocals
Erykah Badu
Vocals
Showing 3 of 5 results
Nina Simone
Vocals, piano
Miles Davis
Trumpet
Herbie Hancock
Keys
Joni Mitchell
Guitar, vocals
Erykah Badu
Vocals
Showing 3 of 5 results
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.
The import and the props worth knowing about, in one place.
import { Search25 } from "@/components/beste/piece/search25";
<Search25
placeholder="Search people"
queries={[
"miles",
"herbie",
"joni"
]}
results={[
{
"title": "Nina Simone",
"meta": "Vocals, piano",
"avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face"
},
{
"title": "Miles Davis",
"meta": "Trumpet",
"avatar": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face"
},
{
"title": "Herbie Hancock",
"meta": "Keys",
"avatar": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
},
{
"title": "Joni Mitchell",
"meta": "Guitar, vocals"
},
{
"title": "Erykah Badu",
"meta": "Vocals"
}
]}
/>Focused search input with a typed query, blinking caret, hit counter, and clear button.
Members
Rowan Blake
Active · Clinic 2
Rowan Blake · Intake notes
Updated 3 days ago
Invoice #4821
Rowan Blake · Paid
3 of 11 matches shown
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.
Search input with a dropdown of autocompletions that bolds the matched substring.
Search header with category tabs that show per-tab counts and an underline for the active one.