CommandPalette

Navigation

⌘K/Strg+K öffnet eine Befehlspalette mit Suchfeld, Treffer-Ranking, gruppierten Einträgen und voller Tastatursteuerung (↑ ↓ Enter Esc) — die moderne Power-User-Navigation mit geblurtem Backdrop.

Live Demo

Tipp: Funktioniert auch global mit ⌘K (Mac) bzw. Strg+K — dann ↑↓ und Enter.

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`CommandItem[]`	Ja	—	Einträge {label, group?, icon?, href?, keywords?, shortcut?, onSelect?}
`placeholder`	`string`	Nein	`'Suchen oder Befehl eingeben…'`	Platzhalter im Suchfeld
`hotkey`	`string`	Nein	`'k'`	Hotkey-Buchstabe (mit Cmd/Strg)
`accentColor`	`string`	Nein	`'#f0a808'`	Akzentfarbe (Auswahl)
`theme`	`'dark' \| 'light'`	Nein	`'dark'`	Farbschema
`showTrigger`	`boolean`	Nein	`true`	Trigger-Button anzeigen
`triggerLabel`	`string`	Nein	`'Schnellsuche'`	Beschriftung des Triggers
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse für den Trigger

Code-Beispiel

<CommandPalette
  items={[
    { label: 'Startseite', group: 'Seiten', icon: '🏠', href: '/' },
    { label: 'Speisekarte', group: 'Seiten', icon: '🍕', href: '/speisekarte', keywords: 'menu essen' },
    { label: 'Tisch reservieren', group: 'Aktionen', icon: '🗓️', onSelect: ()=> openReservation() },
    { label: 'Anrufen', group: 'Aktionen', icon: '📞', href: 'tel:+49123456', shortcut: 'A' },
  ]}
/>