An app header with a search field that stretches across the whole bar on focus or Cmd K, pushing the links aside and dropping grouped results with highlighted matches. Arrow keys move, Enter opens and Escape clears, then closes.
npx shadcn@latest add https://hyperblur.dev/r/navbar-command.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-command.tsx.
import { NavbarCommand } from "@/components/hyperblur/navbar-command"
<NavbarCommand onSelect={(item) => router.push(item.href ?? "/")} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Relay" | Product name next to the mark. |
| links | { label: string; href: string }[] | Projects, Deployments, Analytics, Settings | Links that slide away while searching. |
| items | NavbarCommandItem[] | 3 projects, 4 actions, 3 settings | Searchable entries with id, label, group and an optional hint, shortcut letter and href. |
| recent | string[] | ["relay-web", "Environment variables", "Roll back"] | Chips shown when the field is empty. Clicking one fills the query. |
| placeholder | string | "Search or jump to..." | Placeholder of the field. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Start expanded when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the search expands or collapses. | |
| defaultQuery | string | "" | Initial query. |
| onSelect | (item: NavbarCommandItem) => void | Called when a result is chosen by click or Enter. | |
| user | { name: string } | null | { name: "Maya Chen" } | Account shown as an initials avatar. Pass null to hide it. |
| accent | string | "#a78bfa" | Color of the mark, the focus glow, matches and the selection bar. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |