- Acciones
- Crear proyecto⌘N
- Invitar a una persona⌘I
- Exportar informe⌘E
- Ir a
- Ajustes
- Facturación
- Equipo
- Sin resultados
Paleta de comandos
Un buscador de acciones con grupos, atajos y navegación con flechas que filtra mientras escribes.
Ajustes
Código
<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">Buscar <kbd>⌘K</kbd></button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Paleta de comandos"><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="Escribe un comando o busca" aria-label="Escribe un comando o busca" 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">Acciones</li><li role="option" class="op" aria-selected="true" data-g="Acciones"><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>Crear proyecto</span><kbd>⌘N</kbd></li><li role="option" class="op" aria-selected="false" data-g="Acciones"><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>Invitar a una persona</span><kbd>⌘I</kbd></li><li role="option" class="op" aria-selected="false" data-g="Acciones"><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>Exportar informe</span><kbd>⌘E</kbd></li><li class="gp" role="presentation">Ir a</li><li role="option" class="op" aria-selected="false" data-g="Ir a"><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>Ajustes</span></li><li role="option" class="op" aria-selected="false" data-g="Ir a"><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>Facturación</span></li><li role="option" class="op" aria-selected="false" data-g="Ir a"><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>Equipo</span></li><li class="em" role="presentation">Sin resultados</li></ul></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Overlays
Ver todos: OverlaysDónde usarlo
Quien usa herramientas a diario espera una paleta de comandos que se abra con Comando o Control y K. Esta aparece sobre la página oscurecida con un buscador, comandos agrupados en acciones y navegación, atajos de teclado y una fila resaltada que sigue a las flechas o al puntero. Al escribir, la lista se filtra al momento y oculta los grupos vacíos.
Intro ejecuta el comando resaltado y cierra la paleta, Escape o un clic en el fondo la cierran, y el campo usa el patrón combobox con listbox. Cambia los comandos por tus rutas y acciones, con textos cortos que empiecen por un verbo.