Patterns

CommandPalette

An exportable cmdk-based palette with a real index of docs, routes, actions, shortcuts, and keywords.

installnpx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-command-palette.json

Preview

import { CommandPalette, type CommandPaletteItem } from "@/components/br/command-palette";

const items: CommandPaletteItem[] = [
  { id: "clients", label: "Open clients", group: "Navigation", href: "/clients" },
  { id: "invoice", label: "Create invoice", group: "Actions", action: createInvoice },
];

<CommandPalette open={open} onOpenChange={setOpen} items={items} />

Props

Prop	Type	Default	Description
items	CommandPaletteItem[]	—	Searchable commands grouped by label.
href	string	—	Navigate after selection.
action	() => void	—	Run local action after selection.
keywords	string[]	—	Additional fuzzy-search terms.

CommandPalette

Preview

BR-UI command palette

Props