⌘K modal with a query bar, three typed results, and a keyboard-hint footer at the bottom.
The import and the props worth knowing about, in one place.
import { Search3 } from "@/components/beste/piece/search3";
<Search3
surface="card"
bordered={true}
inverted={false}
query="launch"
results={[
{
"icon": "page",
"label": "Launch plan Q2",
"hint": "Docs"
},
{
"icon": "channel",
"label": "launch-prep",
"hint": "Channel"
},
{
"icon": "user",
"label": "Laura Ng",
"hint": "Launch lead"
}
]}
footerHint="↑↓ to navigate"
/>A single-line search field with a leading magnifier, placeholder, and a monospace keyboard shortcut chip.
Command menu with two sectioned buckets of results, each prefixed by a category label.
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.
Gradient-bordered prompt input with a sparkle icon and a tinted Ask AI action button.