designmotionhq

interaction

Command Palette

⌘K is a system, not a search box.

Watch on Instagram

Key insights

  • Use fuzzy matching, not exact substring search — typing "stg" should still surface "Settings", "Storage", and "Staging". Exact matching returns nothing and feels broken.
  • Group results into labeled sections (Recent, Actions, Pages) so a long flat list becomes scannable structure instead of an undifferentiated wall.
  • Make it fully keyboard-driven: arrows move the highlight, Enter runs the selected command, Esc closes — never force the user back to the mouse.
  • Never open to a blank void. Prefill recent or suggested commands so people have a starting point before they type a single character.
  • For async commands, show an inline spinner and keep the palette open — load results in place rather than freezing the whole screen.
  • Support nested commands: one command can drill into a sub-menu with a breadcrumb, and Esc walks back exactly one level.

Do / Don't

  • Do: Match queries as fuzzy subsequences so "stg" still finds "Settings"
  • Do: Prefill recent and suggested commands so the palette opens with something to act on
  • Do: Drive everything from the keyboard — arrows to move, Enter to run, Esc to go back
  • Don't: Require exact substring matches — "stg" ≠ "Settings" leaves users staring at "No results"
  • Don't: Open to a blank "No results" void with nothing to select
  • Don't: Freeze the whole screen while an async command loads instead of spinning inline

Want Claude to build this correctly?

UX Engine gives Claude Code the senior-designer reasoning behind every pattern.

The Design System Blueprint

An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.

Get the Blueprint — free

The PDF, plus emails about new patterns and my tools. Unsubscribe anytime.

Related patterns