Motion+

Command Palette

A ⌘K-style command palette with spring-animated entrance, filtered search, and keyboard navigation

Time
5 min
Difficulty
Advanced
Access
Motion+
Matt PerryMarch 12, 2026
>Live exampleOpen in new tab

What we're building

The Command Palette example shows a ⌘K-style command palette - the kind you'd find in VS Code or Linear. Clicking the search trigger (or imagining a keyboard shortcut) opens a modal dialog where you can filter commands, navigate with the arrow keys, and select an item to close the palette.

The animations lean on several Motion APIs:

  • AnimatePresence to animate the backdrop and dialog in and out
  • The animate, initial, and exit props on motion components for enter/exit transitions
  • The layout prop to smoothly reflow groups as the filter changes
  • The layoutId prop for the selection highlight, which animates between items as you navigate