UI components · Navigation
Command Palette
Also called: Command menu, Cmd+K menu, Quick switcher, Command bar
A search box that pops up with a keyboard shortcut (usually Ctrl+K or ⌘K). Type a keyword to jump to a page or run an action.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a command palette. Pressing Ctrl+K or ⌘K opens it centered near the top of the page, 560px wide. At the top is a search input, and below it the results are grouped under "Pages" and "Actions," each item with an icon on the left and its keyboard shortcut on the right. Support arrow keys to select, Enter to run, and Esc to close. When there are no results, show "No results found."
Send to
01Decide
Does your content look like this?
Check both columns to confirm Command Palette is what you need.
Use Command Palette when
- Tool products with lots of features and pages that need a quick way to get anywhere
- Users who prefer the keyboard and want to jump or run commands without touching the mouse
- A docs site that needs a site search people can open at any time
Pick something else when
Simple sites with few features, where a few nav links cover everything
Products mainly for everyday users who don't know keyboard shortcuts, with no other visible way in on the page
Use insteadKeyboard ShortcutYou need to show full search results with filters and pages
Use insteadSearch Results Page
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
It can only be opened with the shortcut, and there's no visible button for it anywhere on the page
- 02
No arrow key or Enter support, so it only works with the mouse and loses the speed of the keyboard
- 03
The shortcut clashes with the browser's or an input's default shortcuts
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A backdrop, a centered popup, a search input at the top, and a grouped results list below. Each list item has an icon, a name, and a shortcut hint.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A command palette is a search box that pops up centered near the top of the page. Press Ctrl+K (⌘K on a Mac) to open it and type a few letters. Matching pages, features, and recent items show up below as you type. Use the arrow keys to move, Enter to run, and Esc to close. VS Code, Linear, Notion, and GitHub all have one, and the site search on many docs sites works this way too. In React it's usually built with the cmdk library, and the shadcn/ui Command component is based on it.
How it differs from a regular Search Box: a search box sits on the page, searches content, and shows results on a search results page. A command palette stays hidden until called, can both search content and run actions ("New document", "Toggle dark mode"), and is aimed at frequent users who like the keyboard. It's a nice-to-have shortcut and can't replace the navigation and buttons visible on the page.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-command-palette- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[cmdk-root][cmdk-dialog][data-slot="command"].DocSearch-Modal
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026