What it looks like
It feels like the quick search on a computer. Press Ctrl K, or ⌘K on a Mac, and the page dims while a white box with rounded corners drops in gently near the top, with the cursor already in the search field. Results come in groups, each row with an icon, a name and, when there is one, shortcut keycaps, and they cascade in one after another. As you type, matched letters are underlined in the accent color, and the selected row gets a soft tint and a small bar on its side. The footer shows the navigation keys and how many results there are.
You may be looking for this if you asked for something like
- a Ctrl K shortcut to search anything in my app
- a search box that pops over the screen like Spotlight on a Mac
- a command menu to move around the dashboard without the mouse
- a search bar with grouped results and keyboard shortcuts
- find pages and actions by typing just part of the name
- a quick search for my product docs
- give my SaaS that search shortcut pro apps have
- recent items listed next to the search
Also known as
- command palette
- cmd k menu
- command menu
- quick switcher
- spotlight search
- omnibar
- keyboard launcher
When to use
- Dashboards and SaaS with many pages and scattered actions
- Docs and catalogs where people search by item name
- Internal tools used all day by keyboard-first people
- Apps that already show shortcuts and want one place to find them all
When to avoid
- Small sites with few pages, where a regular menu is enough
- Mostly mobile audiences, who lose the keyboard shortcut and rely on the button
- English interfaces as is, since the built-in labels and relative times are in Portuguese
How to ask your AI
Build a command palette that opens with Ctrl K or ⌘K in my dashboard: a native dialog, accent-insensitive fuzzy search with highlighted letters, grouped results with icons and shortcuts, recent items, arrow and Enter navigation, Esc to close and no entrance animation for reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Command Palette
How do I connect Command Palette commands to my app pages?
Pass the items prop with an id, label, group and, optionally, an icon, shortcut and search keywords. When someone presses Enter or clicks, Command Palette emits a run event with the item, and you navigate or run the action. Whatever was run moves into the recent group by itself, with a relative time.
Does the Command Palette shortcut get in the way of the browser?
While it is mounted, Command Palette catches Ctrl K or ⌘K before the rest of the page and blocks the browser default for that combination; once it unmounts, the shortcut is gone. The hotkey prop changes the letter, and an empty string turns the shortcut off, leaving only the open button.
Is Command Palette accessible and does it work on phones?
Yes. Command Palette uses a native dialog that traps focus and closes with Esc or an outside click; the search field is a combobox that announces the active option, and the result count is announced too. On phones, the button opens the palette, a tap runs an item and the shortcut keycaps hide on narrow screens.
