Tabbed Results
Search header with category tabs that show per-tab counts and an underline for the active one.
Usage
The import and the props worth knowing about, in one place.
import { Search13 } from "@/components/beste/piece/search13";
<Search13
query="onboarding"
tabs={[
{
"label": "All",
"count": 48
},
{
"label": "Pages",
"count": 22
},
{
"label": "Files",
"count": 14
},
{
"label": "People",
"count": 12
}
]}
activeIndex={1}
/>More Search pieces
View all SearchMembers
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.
Grouped Results
Command menu with two sectioned buckets of results, each prefixed by a category label.
Active Query
Focused search input with a typed query, blinking caret, hit counter, and clear button.
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.
