Command palette
A command palette is a search box, opened with a keyboard shortcut, that finds and runs any page or action in an app.
- Also called
- command menu, cmd+k, quick switcher
- Platforms
- Web
- In the gallery
- 59 web designs
Command palettes from the Kombai gallery: an AI model platform's grouped commands, a workspace tool's filtered search and a presentation tool's create menu.
What is a command palette?
A command palette is a floating search box that opens over the app, usually with Cmd+K or Ctrl+K. People type a few letters and the list below narrows to the matching pages, records and actions. Arrow keys move through the results, Enter runs the highlighted one and the palette closes, so people never reach for the mouse.
- One box covers both navigation and actions, so people search instead of hunting through menus.
- It works from anywhere in the app with the same shortcut, and every result can be picked from the keyboard.
Command palettes show up across dashboards, project tracker and code editor screens.
When to use a command palette
- Apps with many pages and actionsTools where the menus can no longer show everything people do.
- Frequent, keyboard-heavy usersEditors, issue trackers and design tools used for hours a day.
- Jumping between recordsOpening a project, a person or a file by name in a couple of keystrokes.
When not to use one
- As the only way inMost people never press the shortcut. Keep visible menus and buttons for every action.
- Small apps with a few screensA clear navbar or side navigation is faster to scan than typing.
- Searching long contentFull-text search with filters and a results page suits documents and catalogs better.
Anatomy of a command palette
This one works. Press Open palette, type a few letters, move with the arrow keys, press Enter to run a command and Escape to close.
Billing bugs
- Refund total rounds down on annual plans
- Invoice email sent twice after retry
- Tax line missing for EU customers
Press Open palette, or Cmd+K or Ctrl+K inside this demo.
Recent
Actions
- Closed
- Open
- Filtered
- No results
- Search fieldFilters the list as people type
- Group labelSeparates pages from actions
- Result rowIcon, name and a hint
- Shortcut hintThe key that runs it directly
- FooterKeys to move, pick and close
- StatesClosed, open, filtered, empty
Command palette variants
We sorted every command palette design in the Kombai gallery and found five patterns. Browse all 59 web designs.
1. Action lists with shortcuts
A list of commands, each with an icon and the key that runs it, so people learn the shortcut while they search.
2. Search with filters
Tabs or chips across the top narrow results to tasks, pages, people or files, and each row shows where the item lives.
3. Jump-to navigation
A short list of the app's pages and recent places, so people move around the app without the sidebar.
4. Results with a preview
A split panel that shows the highlighted result on the right, so people check it before opening it.
5. Nested and scoped steps
Picking a command opens a second list in the same box, like snooze times, or a chip limits the search to one area.
Where command palettes show up
Developer tools and consoles
Editor commands, docs search and service lookups in code editors, backend consoles and incident tools.
Issue trackers and project tools
Assigning, changing status and finding issues without leaving the list.
Docs, notes and chat history
Finding a page, a past conversation or a line of copy by a word in it.
Command palette vs similar components
Build notes
- Open the palette with Cmd+K on macOS and Ctrl+K elsewhere, and also from a visible search button for people who never learn the shortcut.
- Render it as a modal dialog with focus in the search field on open. Escape closes it and returns focus to where people were.
- Give the field role="combobox" with aria-expanded and aria-controls pointing at a role="listbox" of results.
- Keep focus in the field and mark the highlighted row with aria-activedescendant, so people keep typing while the arrow keys move the highlight.
- Match loosely: ignore case, match the start of each word and rank recent and frequent items first.
- Show a short empty state when nothing matches, and announce the result count in a polite live region.
FAQ
What's the difference between a command palette and a search bar?
A search bar finds content and usually shows it on a results page. A command palette also runs actions, like creating an issue or switching theme, and it closes as soon as people pick something.
Which shortcut should open a command palette?
Cmd+K on macOS and Ctrl+K on Windows and Linux are the most common. Some editors use Cmd+Shift+P instead. Pick one that does not clash with the browser or with typing, and show it next to the search button.
What should a command palette show before people type?
Recent items and a few suggested actions, grouped under small labels. An empty box gives no hint of what the palette can do.
Do command palettes work on mobile?
They are built for keyboards, so they matter most on desktop. On phones, the same search can sit behind a search button and open full screen, with large rows for tapping.
Related terms
All glossary terms · Browse 59 web command palette designs