- Acciones
- Crear proyecto⌘N
- Invitar a una persona⌘I
- Exportar informe⌘E
- Ir a
- Ajustes
- Facturación
- Equipo
- Sin resultados
Command palette
A searchable list of actions with groups, shortcuts and arrow key navigation that filters as you type.
Settings
Code
<div class="uv-ocp"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Search <kbd>⌘K</kbd></button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Command palette"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input placeholder="Type a command or search" aria-label="Type a command or search" role="combobox" aria-expanded="true" aria-controls="uv-ocp-l" autocomplete="off"><kbd>Esc</kbd></label><ul id="uv-ocp-l" role="listbox"><li class="gp" role="presentation">Actions</li><li role="option" class="op" aria-selected="true" data-g="Actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span>Create project</span><kbd>⌘N</kbd></li><li role="option" class="op" aria-selected="false" data-g="Actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5M18.5 8v6M15.5 11h6"/></svg><span>Invite someone</span><kbd>⌘I</kbd></li><li role="option" class="op" aria-selected="false" data-g="Actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14"/></svg><span>Export report</span><kbd>⌘E</kbd></li><li class="gp" role="presentation">Go to</li><li role="option" class="op" aria-selected="false" data-g="Go to"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"/></svg><span>Settings</span></li><li role="option" class="op" aria-selected="false" data-g="Go to"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2.5"/><path d="M3 10h18"/></svg><span>Billing</span></li><li role="option" class="op" aria-selected="false" data-g="Go to"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8.5" r="3.5"/><circle cx="17" cy="10" r="2.5"/><path d="M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5M16 14.6c2.6.2 4.6 2 5 4.9"/></svg><span>Team</span></li><li class="em" role="presentation">No results</li></ul></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Power users expect a command palette in modern tools, opened with Command or Control and K. This one drops in over a dimmed page with a search field, grouped commands for actions and navigation, keyboard shortcut hints and a highlighted row that follows the arrow keys or the pointer. Typing filters the list instantly and hides empty groups.
Enter runs the highlighted command and closes the palette, Escape or a click on the backdrop dismisses it, and the field uses the combobox pattern with a listbox. Replace the commands with your own routes and actions, and keep labels short and verb first.