⌘Interlace

Watch what a great command palette does that a bad one doesn't.

Async with race cancellation, every frozen state, the exact motion timings. Most palettes hide this craft behind a pretty input. This one puts it on the table so you can scrub it, break it, and inspect it.

Free. Copy-paste React source you own, via the shadcn CLI.

Live demo · scrub it

The async race, in slow motion

Type fast and two requests overlap. Scrub the timeline, then flip to a naive palette to watch the stale one win.

t = 0.00s
searcha
  • Searching…
fetch("a")
in flight…
fetch("as")

The slow request loses. When the faster "as" response arrives, Interlace advances a monotonic request id. The older "a" response resolves later, sees its id is stale, and is dropped before it can touch the UI.

Nested pages · walk the stack

Drill into sub-actions without leaving the keyboard

Select a command with children to push a sub-page; Escape pops it. A real navigation stack with breadcrumbs — most palettes make you build this yourself.

  1. 1Select a command ending in “…” to push a sub-page.
  2. 2Arrow keys and fuzzy search work on every level.
  3. 3Escape or “← Back” pops one page; Escape at the root closes.

Recents · shortcut hints

Remembers what you use, and shows the keys

Recently-used commands float to the top; shortcut hints render inline. Two conveniences every great palette has — and ours gives you for free.

Shortcut hints sit on the right of each row. Run a few commands, then reopen the palette — recently-used commands float to the top of their group.

Hints are display-only — your app wires the actual keys (just like cmdk). The built-in ⌘K to open is the one shortcut the palette owns.

recents:— none yet, pick something

6 states · frozen

The states that flash by too fast to see

Loading, empty, error, no-results. Every palette has them; almost none are designed. Freeze each one and stare.

Open, no query yet. Grouped commands, first item active.

Straight from motion.ts

The timings you normally only feel

See each easing curve, then replay it. Invisible craft, made into a feature you can read and edit.

The panel springs up and scales in. Responsive, not bouncy: high stiffness, heavy damping.

motion.ts
type: "spring"
stiffness: 550
damping: 40
mass: 1

Virtualized · 5,000 commands

Stays instant no matter how long the list gets

Only the visible rows render. Big command sets scroll and filter without breaking a sweat.

5,000 commands loaded · only the visible window renders

Drop it in. Own the source.

One command installs the palette as files in your repo. Yours to read, edit, and ship.