A search input with a slash shortcut that focuses it from anywhere, a clear button, bracket corners that open on focus and a results readout.
npx shadcn@latest add https://hyperblur.dev/r/hud-search-field.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-search-field.tsx.
import { HudSearchField } from "@/components/hyperblur/hud-search-field"
<HudSearchField resultCount={12} total={34} onChange={(q) => console.log(q)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Controlled query. Pair with onChange. | |
| defaultValue | string | "" | Initial query when uncontrolled. |
| onChange | (value: string) => void | Called with the new query on typing, clear and Escape. | |
| resultCount | number | Number of matches shown in the readout. Hidden when undefined. | |
| total | number | Total items, shown as 03 / 34 next to the count. | |
| shortcut | string | "/" | Key that focuses the field from anywhere on the page. Empty string turns it off. |
| label | string | "Search" | Accessible name of the input. |
| placeholder | string | "Search experiments" | Placeholder text. |
| accent | string | "#ff4d4d" | Focus glow, caret and bracket color. |