HTML + CSSOverlays

Befehlspalette

Eine durchsuchbare Aktionsliste mit Gruppen, Shortcuts und Pfeiltasten-Navigation, die beim Tippen filtert.

Einstellungen

16px
1x

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">Suchen <kbd>⌘K</kbd></button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Befehlspalette"><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="Befehl eingeben oder suchen" aria-label="Befehl eingeben oder suchen" 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">Aktionen</li><li role="option" class="op" aria-selected="true" data-g="Aktionen"><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>Projekt erstellen</span><kbd>⌘N</kbd></li><li role="option" class="op" aria-selected="false" data-g="Aktionen"><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>Person einladen</span><kbd>⌘I</kbd></li><li role="option" class="op" aria-selected="false" data-g="Aktionen"><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>Bericht exportieren</span><kbd>⌘E</kbd></li><li class="gp" role="presentation">Gehe zu</li><li role="option" class="op" aria-selected="false" data-g="Gehe zu"><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>Einstellungen</span></li><li role="option" class="op" aria-selected="false" data-g="Gehe zu"><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>Abrechnung</span></li><li role="option" class="op" aria-selected="false" data-g="Gehe zu"><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">Keine Ergebnisse</li></ul></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Wer täglich mit Tools arbeitet, erwartet eine Befehlspalette, die sich mit Command oder Strg und K öffnet. Diese erscheint über der abgedunkelten Seite mit Suchfeld, gruppierten Befehlen für Aktionen und Navigation, Shortcut-Hinweisen und einer markierten Zeile, die Pfeiltasten oder Zeiger folgt. Tippen filtert sofort und blendet leere Gruppen aus.

Enter führt den markierten Befehl aus und schließt die Palette, Escape oder ein Klick auf den Hintergrund schließen sie ebenfalls, und das Feld folgt dem Combobox-Muster mit Listbox. Ersetze die Befehle durch deine Routen und Aktionen.