Skip to content
Pinky UI

Command Palette

Use for a reusable keyboard-first launcher of product commands, navigation, or creation actions.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Purpose

Use for a reusable keyboard-first launcher of product commands, navigation, or creation actions.

Use when

Many known actions benefit from search, sections, recent items, and a fast shortcut.

Avoid

Application-specific hidden systems or commands that are only reachable through the palette.

Accessibility

Use combobox/listbox semantics, active descendant, visible empty state, Escape, and focus restoration.

Keyboard and touch

Arrow keys move, Enter activates, and a visible button provides a non-shortcut route.

Reduced motion and performance

Filter in memory for small command sets and avoid animated stagger on each query.

Composition and anti-patterns

Keep commands supplied by the host; do not turn this into a second router or permission system.

Source: packages/skills/search/command-palette.md