Recipe
Command Palette
Build a keyboard-first command palette with fuzzy search, keyboard navigation, and grouped actions.
Overview
A command palette gives power users instant access to every action in your app. Press ⌘K to open, type to filter, and navigate with arrow keys. Results update in real-time as you type.
Core Behavior
- ▸Fuzzy matching — scores items by character proximity, not just prefix
- ▸Grouped results — sections for pages, actions, recent items
- ▸Keyboard navigation — ↑↓ to move, ↵ to select, Esc to dismiss
- ▸Highlighted matches — matching characters rendered in violet
States
Empty
No query — show recent and suggested actions
Loading
Async search in flight — show skeleton rows
Results
Filtered items with match highlights and group labels
No results
Empty state with suggestion to refine query
Accessibility
Trap focus inside the palette while open. Announce result count to screen readers via aria-live. Each item receives role="option" with aria-selected reflecting the active index.