Overlays
CommandPalette
The signature feature. Arrow-key navigation, Enter to select, Esc to close. Generic across actions, navigation, and search.
CommandPalette is the kit's signature surface. ⌘K (or Ctrl+K) anywhere opens it. Arrow keys navigate the result list, Enter selects, Esc closes. Each item supports an icon, label, optional description, and optional keyboard hint.
Drives the entire keyboard-first flow inside the KidCash app — adding a chore, switching kids, opening settings — and works equally well as a documentation search or a navigation shortcut launcher in your own app.
Example
tsx
import { CommandPalette, type CommandItem } from '@kidcash/ui';
const items: CommandItem[] = [
{ id: 'goal', label: 'Add savings goal', icon: '🎯', onSelect: () => navigate('/goals/new') },
{ id: 'chore', label: 'Add chore', icon: '🧹', onSelect: () => navigate('/chores/new') },
];
<CommandPalette open={open} onClose={() => setOpen(false)} items={items} />Try it live
← Back to the playground to see CommandPalette rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.