Designing a command palette people actually use

A command palette is the fastest surface in your app. Here's how to make it feel instant, discoverable, and keyboard-native.

Jun 14, 20261 min read

Why a palette?

The command palette collapses navigation, search, and actions into one keystroke. When done well it becomes muscle memory.

A great palette answers "what can I do here?" before the user finishes typing.

Principles

Instant: results should appear within a frame of typing.
Forgiving: fuzzy-match, don't demand exact spelling.
Discoverable: group results and show keyboard hints.

A minimal fuzzy match

export function fuzzy(query: string, text: string): boolean {
  const q = query.toLowerCase();
  const t = text.toLowerCase();
  let i = 0;
  for (const ch of t) {
    if (ch === q[i]) i++;
    if (i === q.length) return true;
  }
  return q.length === 0;
}

Debounce network-backed sources, but never debounce local, in-memory search — it should feel free.

Wiring the shortcut

Bind Cmd/Ctrl + K at the document level and always allow Escape to dismiss. Trap focus while open so screen-reader users don't wander off.

That's the whole trick: make the fast path obvious, and get out of the way.

#UX

#React

#Accessibility