Command Palette

Matt Perry

In this tutorial, we're going to build the Command Palette example step-by-step.

This example is rated expert difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).

Here's a live demo of the example we're going to be creating:

Checking Motion+ status…

The Command Palette tutorial

is exclusive to Motion+

300+ examples & 40+ tutorials

Premium APIs

Motion Studio editing tools

alpha

Discord community

Early access

Lifetime updates

Get Motion+ for instant access

One-time payment, lifetime updates

Already joined?

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