Command Palette

Global ⌘K / Ctrl+K launcher. Jump to any page, action, or setting without leaving the keyboard. Composes the List primitive, driving it from a search input the palette owns (type-to-search, arrow keys, Enter to execute), wrapped in a top-anchored modal shell.

a11y (built in): the palette is a real modal (role=dialog + aria-modal) with a focus trap, scroll-lock, Esc to close, and focus returned to whatever was focused before it opened. Search follows the WAI-ARIA combobox pattern rather than roving focus: the input gets role=combobox, aria-expanded, aria-autocomplete=list and aria-controls, the command list is a listbox of options with stable ids, and ↑↓ move aria-activedescendant while focus stays in the field. Filtering announces its result count through a visually-hidden aria-live=polite region and re-seeds the active option to the first visible match; group headers are role=separator aria-hidden, and the unavailable command carries aria-disabled — visible but unreachable.

Usage: One .lb-cmdk-backdrop per page with data-lb-cmdk. Inside: .lb-cmdk shell with .lb-cmdk__search, a <ul class="lb-list" data-lb-list data-lb-list-mode="single"> for commands (optionally with .lb-cmdk__group-label headers), optional .lb-cmdk__footer for kbd hints. Default hotkey ⌘K / Ctrl+K; override with data-lb-hotkey="/". Dispatches lb-cmdk-select on item activation.

Try it

Press ⌘K (Mac) or Ctrl+K (Windows/Linux) anywhere on this page. Or click the search-bar trigger below — either way opens the palette with focus on the command search input inside.

⌘ K

This input is a trigger, not the real search — it's a read-only .lb-input that opens the palette on click. The real search lives inside the palette and auto-focuses when the palette opens.

Last action: (nothing yet)

Patterns covered in this demo

  • Three command groups: Navigate, Actions, Settings
  • Icons + keyboard-shortcut hints (the .lb-list__hint slot from the List primitive)
  • Type-to-filter across all three groups at once
  • Arrow keys move the highlight while focus stays in the search field; Enter executes; Escape closes
  • Backdrop click closes
  • A disabled item to show unreachable-but-visible state
  • Destructive action styled with --danger
Esc
  • Navigate
  • Go to Home G H
  • Components gallery G C
  • Foundation tokens G T
  • Actions
  • New file ⌘ N
  • Import tokens from JSON ⌘ I
  • Export current theme as JSON ⌘ E
  • Publish to npm (signed-in only)
  • Settings
  • Switch to light mode
  • Switch to dark mode
  • Open theme editor ⌘ .
  • Reset all theme edits

  • No commands match

    Try a different search term.

↑↓ navigate ↵ to select Esc to close