Free Component

Command Palette (Cmd+K)

A spotlight command palette popup with live filtering, keyboard arrow navigation, shortcut hints and ARIA attributes. A standard control for modern SaaS tools.

dark
search
modal
command palette
keyboard
accessible

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="cmd-wrap">
  <button class="trigger-btn" id="openCmd" aria-haspopup="dialog">
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <span>Search commands...</span>
    <kbd>Cmd K</kbd>
  </button>

  <div class="palette-backdrop" id="paletteBackdrop">
    <div class="palette-box" role="dialog" aria-modal="true" aria-label="Command Menu">
      <div class="search-row">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        <input type="text" id="cmdInput" placeholder="Type a command or keyword..." autocomplete="off" />
        <span class="esc-badge" id="closeCmd">ESC</span>
      </div>
      <div class="results-list" id="resultsList" role="listbox">
        <div class="group-title">Suggestions</div>
        <div class="cmd-item active" role="option" aria-selected="true" data-label="Create New Project">
          <span class="item-icon">&#10010;</span>
          <span class="item-text">Create New Project</span>
          <kbd>&crarr;</kbd>
        </div>
        <div class="cmd-item" role="option" aria-selected="false" data-label="Search Documentation">
          <span class="item-icon">&#9776;</span>
          <span class="item-text">Search Documentation</span>
          <kbd>D</kbd>
        </div>
        <div class="group-title">Navigation</div>
        <div class="cmd-item" role="option" aria-selected="false" data-label="Go to Analytics Dashboard">
          <span class="item-icon">&#9650;</span>
          <span class="item-text">Go to Analytics Dashboard</span>
          <kbd>G A</kbd>
        </div>
        <div class="cmd-item" role="option" aria-selected="false" data-label="Manage Team Members">
          <span class="item-icon">&#9787;</span>
          <span class="item-text">Manage Team Members</span>
          <kbd>G T</kbd>
        </div>
        <div class="group-title">Account</div>
        <div class="cmd-item" role="option" aria-selected="false" data-label="Copy API Key">
          <span class="item-icon">&#9919;</span>
          <span class="item-text">Copy API Key</span>
          <kbd>C</kbd>
        </div>
      </div>
      <div class="palette-footer">
        <span>Use <kbd>&uarr;</kbd> <kbd>&darr;</kbd> to navigate</span>
        <span id="statusMessage">Press Enter to select</span>
      </div>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a keyboard-first command palette (Cmd+K) modal with HTML, CSS and vanilla JavaScript.

Requirements:
- A trigger button with search icon and keyboard shortcut pill "Cmd K".
- A fixed backdrop overlay with blur (backdrop-filter) and a centered dialog (max-width 560px, rounded corners, dark theme #0f1424).
- A search bar with search icon, live text input, and an ESC badge.
- A categorized results list with grouped titles (Suggestions, Navigation, Account) and option cards with icons, labels, and shortcut keys.
- Real-time search filtering as the user types into the input.
- Arrow keys (Up/Down) cycle the active item with auto-scrolling into view. Enter triggers the selected action.
- Global shortcut listener for Cmd+K / Ctrl+K and Escape key to toggle the palette open/closed.
- Accessible role="dialog", aria-modal="true", and role="option".

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Create a fixed backdrop with backdrop-filter: blur(8px) and position the command dialog near the top of the viewport.
2
Listen for Cmd+K (Mac) or Ctrl+K (Windows/Linux) on the window to toggle open and close.
3
Filter the items list by matching the user's input string against each item's text label.
4
Handle Up and Down arrow keys to update the highlighted active index and scroll it into view.
5
Handle Enter key and click to execute the chosen command and close the dialog.
6
Restore focus to the trigger button when closing.

Customisation tips

In Next.js or React, implement this with an open/close boolean state and an effect hook listening to keydown.
Integrate with your router to navigate to pages instantly upon selection.
Add recent searches using localStorage for quick re-use.