A command palette is a confession that your navigation does not scale. That is not an insult: past a certain surface area, no menu can hold everything, and a searchable list of every action is a better answer than a fourth level of nesting. The mistake is shipping one as a decoration on a product with eleven screens.
218 components on 21st carry the search tag. Here is when the palette earns its place and what it has to do.
The palette
Command by originui is the shadcn-shaped base, and Command Palette by Rafael Porto is the assembled version.
Action Search Bar by kokonutd is the shape worth studying: a search field that suggests actions rather than results, which is the distinction that makes a palette useful. Action Searchbar by Kousthubha Yadiyala is the same idea, and AI Input With Search by kokonutd is the version where the query can also become a prompt.
The contract is small and specific. Cmd-K and Ctrl-K open it, from anywhere, including inside inputs where the shortcut must still win. Escape closes and returns focus. Arrows move a highlight while the text input keeps focus, which means aria-activedescendant rather than moving focus into the list. Enter runs the highlighted item. And the whole thing is a dialog, so it traps focus and makes the page behind it inert.
The search field
Different component, different job: filtering a list rather than jumping to an action. Expanding Search Dock by Moumen Soliman and Animated Search Bar by Erik X are the compact shapes, and Search Modal by Efferd is the overlay version.
Three rules, from the inputs guide and worth repeating here. Debounce the request, not the field, so typing stays instant while the network waits 200 to 300ms. Announce the result count in a live region, or a screen reader user types and hears nothing. And keep the query in the URL for anything the reader might share or return to.
What goes in it
The part that decides whether anyone uses it twice.
Recents first, on an empty query. An empty palette is a blank stare. The last five things this reader did are the highest-probability next actions, and showing them turns the palette from a search box into a shortcut.
Actions, not just pages. "Create invoice", "Toggle dark mode", "Invite teammate". A palette that only navigates is a menu with extra steps.
Group and label. Pages, actions, settings, recent. Ungrouped results past about ten items become a wall.
Fuzzy matching, with an honest ranking. People type "invc" for invoices and "dark" for the theme toggle. Exact prefix matches should still win, or the fuzzy match makes the obvious query worse.
A visible hint. The shortcut has to be discoverable: a small "⌘K" in the header search field is how most people learn the palette exists at all.
Where it does not belong
A palette is for a product with more actions than a person can remember. On a marketing site, a blog or a five-screen app it is a keyboard shortcut for something already visible, and it adds a dependency, a dialog and a set of behaviours to maintain.
The honest test: write down every command it would contain. If the list is under fifteen and they all fit in the navigation, the navigation is the answer.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| cmdk | The palette itself: filtering, groups, keyboard, ARIA | You still design it |
| shadcn/ui Command | cmdk wired to the dialog and the theme | Plain by design |
| A search service | Real search over real content, with typo tolerance | A hosted dependency and an index to keep fresh |
| 21st | Palettes, action bars, expanding fields and search modals | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a command palette, get the previews inline, and let the agent write the file.
Frequently asked
- Does my app need a command palette?
- Write down every command it would contain. If the list is under about fifteen and they all fit in the navigation, the navigation is the answer, and the palette is a dependency and a set of behaviours to maintain for a shortcut to something already visible.
- What is the keyboard contract for a command palette?
- Cmd-K or Ctrl-K opens it from anywhere, including inside inputs. Escape closes and returns focus. Arrows move a highlight while the text field keeps focus, which means aria-activedescendant rather than moving focus into the list. Enter runs the highlighted item, and the whole thing is a dialog that traps focus.
- What should a palette show before you type?
- Recents. The last five things this reader did are the highest-probability next actions, and they turn a blank box into a shortcut. Then group the rest, include actions rather than only pages, and rank exact prefix matches above fuzzy ones so the obvious query is not made worse.
- How is a search field different from a palette?
- A palette jumps to actions; a search field filters a list. The search field needs a debounced request rather than a debounced input, a result count announced in a live region, and the query in the URL for anything the reader might share or return to.