Composition / Navigation
Command Palette
Search and run application actions from a focus-safe modal command surface.
01 / Keyboard surfaceMove without leaving context.
No command selected
Delivery contract
Install it
pnpm add easecraft@0.1.0The composition imports stable APIs from easecraft.
Files / 02
- utility
components/easecraft/compositions/command-palette-core.tsx - composition
components/easecraft/compositions/command-palette.tsx
Dependencies / 03
- easecraft
- npm / 0.1.0
- react
- peer / >=18.2.0 <20.0.0
- react-dom
- peer / >=18.2.0 <20.0.0
Component graph
Foundations
Interaction contract
Keyboard
- Control+K / Meta+K
- Opens or closes the palette globally.
- ArrowUp / ArrowDown
- Moves the active option through enabled results.
- Home / End
- Moves to the first or last enabled result.
- Enter
- Runs the active command and closes the palette.
- Escape
- Closes the modal palette and restores trigger focus.
Release requirement
Accessibility
- Pattern
- dialog-combobox
- Focus management
- Required
- Reduced motion
- Immediate semantic fallback
- Note
- Uses a modal dialog containing an aria-activedescendant combobox and linked listbox.
- Note
- Disabled commands remain discoverable but are skipped by keyboard selection.