Skip to content

Command Palette

Every wallet action, three keystrokes away. ⌘K opens it, fuzzy matching narrows it, Enter commits. Grouped commands, keyboard hints, and an active row that glides with arrow keys instead of jumping.

Open states (static replicas)

The real palette portals to <body> and takes over the viewport, so these are static replicas built from the exact surface classes. Resting shows all groups with the first row active; a query filters fuzzily; a miss shows the empty message.

Resting — first row active
Filtered — query “sw”

Fuzzy match: characters in order, not contiguous.

Empty — query “stake”
import { CommandPalette, type CommandItem } from "@coldharbor/ui";

const items: CommandItem[] = [
  { id: "send", label: "Send Bitcoin", group: "Actions", hint: "S", icon: Send, onSelect: openSend },
  { id: "lock", label: "Lock wallet", group: "Navigate", hint: "⌘L", icon: Lock, onSelect: lockWallet },
];

<CommandPalette items={items} shortcut="k" />
  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-muted
  • --ch-primary
  • --ch-bg

Live

The real component: ⌘K toggles, arrows move the gliding active row, Enter selects, Escape closes. It portals over the whole page by design.

Portalled palette
or press ⌘K
<CommandPalette items={items} open={open} onOpenChange={setOpen} />
  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-muted
  • --ch-primary
  • --ch-bg

Themes

A compact open replica under all three layers.

  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-muted
  • --ch-primary
  • --ch-bg