navIntermediatefocus

Command Palette

A Cmd+K style overlay with a search input and ranked suggestion list.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a Cmd+K command palette: pressing ⌘K (or Ctrl+K) toggles a centered modal with a backdrop blur, a search input, and a list of commands. Each command has an emoji, a label, and an Enter-key hint on the right. Up/Down arrows move the highlighted row, Enter activates, Esc closes. Typing in the input filters the list against a data-q tag and the visible label. Animate in with a subtle fade + rise.

Code

html

<div class="hint">Press <kbd>⌘</kbd>+<kbd>K</kbd> (or <kbd>Ctrl</kbd>+<kbd>K</kbd>)</div>
<div class="backdrop" hidden>
  <div class="palette">
    <input type="search" placeholder="Type a command…" autocomplete="off" />
    <ul class="items">
      <li data-q="home">🏠<span>Go to home</span><kbd>↵</kbd></li>
      <li data-q="gallery components">🧩<span>Open gallery</span><kbd>↵</kbd></li>
      <li data-q="new">✨<span>New component</span><kbd>↵</kbd></li>
      <li data-q="settings">⚙️<span>Settings</span><kbd>↵</kbd></li>
      <li data-q="help docs">📖<span>Read the docs</span><kbd>↵</kbd></li>
      <li data-q="signout logout">🚪<span>Sign out</span><kbd>↵</kbd></li>
    </ul>
    <div class="foot"><span>↑↓ to navigate</span><span>esc to close</span></div>
  </div>
</div>