Power-query input paired with a suggestions panel that surfaces operator tokens and their meanings.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Search20 } from "@/components/beste/piece/search20";
<Search20
query="is:open assignee:me label:"
operators={[
{
"token": "label:bug",
"label": "Bug reports"
},
{
"token": "label:polish",
"label": "Polish"
},
{
"token": "label:docs",
"label": "Documentation"
}
]}
/>⌘K modal with a query bar, three typed results, and a keyboard-hint footer at the bottom.
Gradient-bordered prompt input with a sparkle icon and a tinted Ask AI action button.
A single-line search field with a leading magnifier, placeholder, and a monospace keyboard shortcut chip.
Focused search input with a typed query, blinking caret, hit counter, and clear button.
Search field followed by a row of trending query chips led by a small flame label.
Pill-shaped voice input with a pulsing mic, live transcript, and a waveform visualizer.