Panels · Components

Command palette

Ctrl/⌘+K search over registered apps, open windows and your own commands.

Press Ctrl + K on this site to try it: it lists the workspace's apps, the other workspaces, every docs page and the themes.

$ pnpm dlx shadcn@latest add @nynxz/command-palette

Usage

const commands: Command[] = [
  {
    id: "theme:lotus",
    label: "Theme: Lotus",
    group: "Themes",
    run: () => setTheme("lotus"),
  },
];

<CommandPalette commands={commands} />;

Apps come in automatically: each registered app appears as Open … or, if it's open, Switch to …, and running it launches the app and moves focus into its window.

Every search term must match somewhere (label, group, hint or keywords); results that match the command's own name rank above ones that only match a keyword.

Props

Prop	Type
`commands`	`Command[]`	extra commands, after the apps
`open`, `onOpenChange`	`boolean`, `(open) => void`	control it (e.g. from a search button); omit both to let it manage itself
`placeholder`	`string`

It's a proper combobox: arrow keys move, Enter runs, Escape or a click outside closes and hands focus back.