Command Palette React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import CommandPalette from "./CommandPalette";

export default function Example() {
  return (
    <CommandPalette
      items={[
        {
          "id": "new",
          "label": "New canvas",
          "description": "Start with a blank page",
          "icon": "＋",
          "shortcut": "⌘ N",
          "group": "Create"
        },
        {
          "id": "browse",
          "label": "Browse collection",
          "description": "Find your next starting point",
          "icon": "◇",
          "shortcut": "⌘ B",
          "group": "Create"
        },
        {
          "id": "recent",
          "label": "Recent projects",
          "icon": "◷",
          "shortcut": "⌘ R",
          "group": "Navigate"
        },
        {
          "id": "settings",
          "label": "Preferences",
          "icon": "⚙",
          "shortcut": "⌘ ,",
          "group": "Navigate"
        }
      ]}
      inline={true}
      placeholder={"Where to next?"}
      emptyLabel={"No matching commands"}
      label={"Workspace commands"}
      closeOnSelect={true}
      accentColor={"#d9c6ef"}
    />
  );
}

Using Command Palette

Supply commands through items and handle the chosen item with onSelect. Keep labels specific enough to distinguish similar actions in search.

Use open and onOpenChange for a dialog, or inline to embed the command list in a page. Set emptyLabel to explain when a search has no matches.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, label, description?, icon?, shortcut?, group?, keywords?, disabled? }. Icons accept React nodes. Shortcut text is a display hint, not a registered global shortcut.
open	boolean	No	false	Controlled visibility when rendered as a modal dialog.
onOpenChange	function	No	undefined	Called with false when closing the modal is requested.
onSelect	function	No	undefined	Called with the chosen item. Disabled items cannot be selected.
inline	boolean	No	false	Render an embedded panel instead of a modal dialog.
placeholder	string	No	"Search commands…"	Search input placeholder and accessible label.
emptyLabel	string	No	"No matching commands"	Message when no commands match.
label	string	No	"Command menu"	Accessible command menu label.
closeOnSelect	boolean	No	true	Request modal closure after selection. Inline panels remain visible.
accentColor	string	No	"#d9c6ef"	Selected command and search focus colour.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.