A searchable launcher that opens with a keyboard shortcut. Every action in your app, one keystroke away. The Linear / Raycast / Notion / VS Code pattern.
Press Cmd+K (or Ctrl+K on Windows) anywhere in the app and a search overlay appears in the center of the screen. Type to fuzzy-search across every page, action, setting, and document. Arrow-keys to navigate, Enter to execute. It replaces nested menus for power users and has become the expected pattern in any productivity tool shipped after 2020.
A global keydown listener watches for Cmd/Ctrl+K and toggles a full-screen overlay. The overlay contains a search input (auto-focused) and a result list grouped by category. As the user types, JS filters items by simple substring (or fuzzy match). Arrow keys move an .active class up/down; Enter triggers the active item; Escape closes. Each item shows an icon, a title, and the keyboard shortcut to invoke it directly.
Press Cmd+K (or Ctrl+K) inside the demo, or click the search button in the top-right. Type to filter.
Press Cmd+K — the palette opens. Type "set" or "doc" or "team". Watch results filter in real time.
Build a Cmd+K command palette. Add a global keydown listener that toggles an overlay when Cmd+K (Mac) or Ctrl+K (Windows/Linux) is pressed. Overlay: position:fixed, inset:0, background:rgba(0,0,0,0.5), backdrop-filter:blur(6px). Panel centered near the top: width 560px, dark background (#14141B), 14px border-radius, big shadow. Panel contents (top to bottom): (1) Search input row with a magnifying-glass icon, input field (autofocus on open), and "Esc" kbd indicator on the right. (2) Results area max-height 340px with overflow-y:auto. Results grouped by category — "Pages", "Actions", "Settings" — each group has a small uppercase mono header. Each result row: a colored mono icon, the action title, and a keyboard shortcut on the right (using styled kbd elements). The currently-selected result has an .active class with a subtle background. (3) Footer with mini kbd hints "↑↓ navigate · ↵ select · esc close" and app version. Behavior: as user types in the input, filter all items by substring case-insensitive. Arrow keys move the .active selection up/down through visible items. Enter triggers the active action. Esc or clicking the overlay closes. When no matches, show "No results" empty state.