Loading page…
Loading page…
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.
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.
Fuzzy match: characters in order, not contiguous.
import { CommandPalette, type CommandItem } from "@coldharbor/webui";
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-bgThe real component: ⌘K toggles, arrows move the gliding active row, Enter selects, Escape closes. It portals over the whole page by design.
<CommandPalette items={items} open={open} onOpenChange={setOpen} />--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-primary--ch-bgA compact open replica under all three layers.
--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-primary--ch-bg