Overlays

Command palette

A searchable list of commands in a modal (⌘K). Typing filters by label, group and keywords (all words must match); arrows move, Enter runs, Escape closes. Focus stays in the search field (aria-activedescendant).

demos/command-palette.tsx

import { Button } from "pixelbits/button";
import { CommandPalette } from "pixelbits/command-palette";
import { toast } from "pixelbits/toast";
import { useState } from "react";

export default function Demo() {
  const [open, setOpen] = useState(false);
  const run = (label: string) => () => toast({ title: label });
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open palette</Button>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        hotkey={false}
        commands={[
          {
            id: "1",
            label: "Pixel button",
            group: "Components",
            onSelect: run("Pixel button"),
          },
          {
            id: "2",
            label: "Pixel image reveal",
            group: "Components",
            onSelect: run("Image reveal"),
          },
          {
            id: "3",
            label: "Copy install command",
            group: "Actions",
            shortcut: "⌘ C",
            onSelect: run("Copied"),
          },
        ]}
      />
    </>
  );
}

Installation

npm: import

import { CommandPalette } from "pixelbits/command-palette";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/command-palette.json

API

<CommandPalette>

Example

<CommandPalette
  commands={[
    { id: "theme", label: "Switch to light theme", group: "Actions", shortcut: "⌘ L", onSelect: toggleTheme },
    { id: "button", label: "Pixel button", group: "Components", onSelect: () => go("/button") },
  ]}
/>

Prop	Type	Default	Description
commands*	Command[]	—	All commands, in display order.
open	boolean	—	Whether it is open (controlled).
defaultOpen	boolean	false	Open on first render (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when it opens or closes.
hotkey	string \| false	"mod+k"	A global shortcut that opens it: `"mod+k"` means ⌘K on macOS and Ctrl+K elsewhere. `false` for none.
placeholder	string	"Type a command or search…"	Placeholder of the search field.
emptyText	ReactNode	"No results"	Shown when nothing matches.
label	string	"Command palette"	Accessible name of the dialog.
className	string	—	Extra classes for the root element.