CommandPalette

Interactive

See CommandPalette in Storybook for every variant, with live controls.

The ⌘K surface: search and run any command from anywhere.

import { CommandPalette } from "@kairosis/eidos";

<CommandPalette
  open={open}
  onClose={() => setOpen(false)}
  commands={[
    { id: "new-run", label: "Start a run", icon: "play", group: "Actions", shortcut: "⌘R" },
    { id: "go-runs", label: "Go to runs", icon: "list", group: "Navigation" },
  ]}
  onSelect={run}
/>;

Props

Prop	Type	Default	Description
open	boolean	—	Required. Renders nothing when false
onClose	() => void	—	Escape and scrim click
commands	Command[]	—	Required
onSelect	(id: string) => void	—
placeholder	string	"Type a command or search…"

Command is { id, label, icon?, group?, shortcut?, onRun? }. Both onSelect and the command's onRun fire.

Guidelines

• Group headings print when the group changes between adjacent commands — so keep same-group commands next to each other in the array, or a heading will repeat.
• Keyboard: ↑/↓ move, Enter runs, Escape closes. The query resets and the input refocuses each time it opens.
• Matching is a case-insensitive substring across label and group.
• Opening it is your job — bind ⌘K yourself; the palette doesn't listen globally.
• shortcut is display only.