A docs header built around search: the field widens and pushes the links out of the way, scope chips show live counts, matches are highlighted and every result is reachable by keyboard. On phones a search button sweeps open into a full-width field with Cancel.
npx shadcn@latest add https://hyperblur.dev/r/navbar-search-first.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-search-first.tsx.
import { NavbarSearchFirst } from "@/components/hyperblur/navbar-search-first"
<NavbarSearchFirst items={docs} onSelect={(item) => router.push(item.href)} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Ledgerline" | Product name next to the logo. |
| placeholder | string | "Search docs, API and components" | Placeholder and accessible name of the field. |
| items | { title: string; section: string; href: string; hint?: string }[] | 12 sample entries in Guides, API and Components | Searchable entries. Sections become scope chips and group headings. |
| recent | string[] | ["webhook signatures", "test cards", "idempotency keys"] | Recent searches shown while the field is empty. Choosing one fills the field. |
| links | { label: string; href: string }[] | Docs, Pricing, Changelog | Links on the right. They slide away while searching and hide on phones. |
| signIn | { label: string; href: string } | null | { label: "Dashboard", href: "#dashboard" } | Solid button on the right. Pass null to hide it. |
| defaultQuery | string | "" | Initial text in the field. |
| defaultOpen | boolean | false | Start with the results panel open. |
| onQueryChange | (query: string) => void | Called on every keystroke. Use it to fetch remote results and pass them as items. | |
| onSelect | (item: NavbarSearchFirstItem) => void | Called when a result is chosen with Enter or a click. | |
| accent | string | "#a78bfa" | Focus glow, highlighted matches, the active row marker and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |