Command palette
A command palette that grows out of its search pill, keeps results in place as you type, turns a scope into a chip in the field, and folds back into a pill that says what you did.
Things to try
- Press the pill, or focus it and press ⌘K (Ctrl+K on Windows and Linux). It grows into the palette, with the cursor in the field.
- Type "set". Results that don't match leave, and the rest slide up to close the gap. Arrow keys move the highlight. Enter opens the highlighted result.
- Choose Projects. The row's name turns into a chip in the field, and the results narrow to projects. Backspace on an empty field takes the chip out.
- Pick anything. The palette folds back into the pill, and the pill says what happened ("Opened Billing", "Invite sent") before going back to asking.
- Press Escape, or click outside, to close it.
Install
npx shadcn@latest add https://your-docs-site/r/command-palette.jsonDependencies
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- One box is both the pill and the palette. It stays on the page while its contents change, and Motion eases its real width, height and corner radius from pill to panel and back. Nothing is scaled, so the text, the shadow and the rounded corners are drawn as they are at every frame, and the height follows the results as you type.
- It plays in beats. Opening, the field arrives, then the rows blur in one after another from the top, in a quarter of a second at most however many there are. Closing runs the other way: the contents blur out first, then the panel folds back into the pill. Rows that stay as you type don't arrive again, so only what's new moves.
- Built on Base UI's Autocomplete. It handles filtering, the highlight, the keyboard and the groups; each row renders as a Motion element so it can arrive in its turn.
- The pill reports back. It's Text, so "Search or jump to…" changes into "Opened Billing" letter by letter, and the same line is announced to screen readers.
- It follows the ARIA combobox pattern. The field is a
comboboxthat owns alistboxofoptions, andaria-activedescendanttracks the highlight while focus stays in the field. Groups are labelled. - ⌘K only fires while the demo has focus, so it doesn't fight the docs' own search. In your app, listen on
window.
Bulk selection
Selecting many rows at once: shift-click selects a range, neighbouring picks join into one band, and the hint at the foot gives way to an action bar whose count rolls as the selection grows.
Comment thread
A post and the conversation under it: typing that grows into the reply, lines that light the path to it, and replies that fold away and come back.