A Cmd+K modal with fuzzy search, grouped results, arrow-key navigation and a focus trap.
npx shadcn@latest add https://hyperblur.dev/r/command-palette.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/command-palette.tsx.
import { CommandPalette } from "@/components/hyperblur/command-palette"
<CommandPalette
items={[
{ id: "board", label: "Open board", group: "Jump to", hint: "G B" },
{ id: "issue", label: "Create issue", group: "Actions", hint: "C" },
]}
onSelect={(id) => console.log(id)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| items | CommandPaletteItem[] | required | Commands to search. Each item has id, label, optional group, hint (shortcut label), icon and onSelect. |
| placeholder | string | "Search…" | Placeholder for the search input and the default trigger. |
| hotkey | boolean | true | Toggle the palette with Cmd+K or Ctrl+K. |
| open | boolean | Controlled open state. Leave undefined to let the palette manage itself. | |
| onOpenChange | (open: boolean) => void | Called whenever the palette asks to open or close. | |
| onSelect | (id: string) => void | Called with the chosen item id, after the item's own onSelect. | |
| inline | boolean | false | Render the panel statically inside its container instead of a modal, without the trigger. |
| color | string | "#2f7bff" | Accent color for the active icon and matched letters. |
| children | ReactNode | Custom content for the trigger button. Defaults to a search field look. |