Free Component

Command Palette (Cmd+K) Modal

A Raycast/Spotlight inspired quick launcher modal with instant search filter, keyboard shortcut badges, and category groups.

dark
modal
command-palette
search
keyboard
shortcuts

Colours in this gradient

#0f172a
#1e293b
#3b82f6
#ffffff

background: ;

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-wrapper">
  <div class="cmd-dialog">
    <div class="cmd-search-bar">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
      <input type="text" id="cmdInput" class="cmd-input" placeholder="Type a command or search..." autofocus />
      <span class="cmd-kbd">ESC</span>
    </div>
    <div class="cmd-list" id="cmdList">
      <div class="cmd-group">Actions</div>
      <div class="cmd-item is-selected" data-title="Create new project">
        <span class="cmd-icon">✨</span>
        <span class="cmd-label">Create new project</span>
        <span class="cmd-shortcut">⌘N</span>
      </div>
      <div class="cmd-item" data-title="Copy deployment URL">
        <span class="cmd-icon">🔗</span>
        <span class="cmd-label">Copy deployment URL</span>
        <span class="cmd-shortcut">⌘C</span>
      </div>
      <div class="cmd-item" data-title="Invite team members">
        <span class="cmd-icon">👥</span>
        <span class="cmd-label">Invite team members</span>
        <span class="cmd-shortcut">⌘I</span>
      </div>

      <div class="cmd-group">Navigation</div>
      <div class="cmd-item" data-title="Go to Analytics">
        <span class="cmd-icon">📊</span>
        <span class="cmd-label">Go to Analytics</span>
        <span class="cmd-shortcut">G then A</span>
      </div>
      <div class="cmd-item" data-title="Go to API Keys">
        <span class="cmd-icon">🔑</span>
        <span class="cmd-label">Go to API Keys</span>
        <span class="cmd-shortcut">G then K</span>
      </div>
      <div class="cmd-item" data-title="Account Settings">
        <span class="cmd-icon">⚙️</span>
        <span class="cmd-label">Account Settings</span>
        <span class="cmd-shortcut">⌘,</span>
      </div>
    </div>
    <div class="cmd-footer">
      <span>Navigate <b class="cmd-key">↑↓</b></span>
      <span>Select <b class="cmd-key">↵</b></span>
      <span>Close <b class="cmd-key">ESC</b></span>
    </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 Spotlight or Raycast-inspired command palette modal in HTML, CSS and vanilla JavaScript.

Requirements:
- Centered floating dialog over a darkened backdrop.
- Search input with search icon and ESC indicator badge.
- List divided into Actions and Navigation sections with icon, label, and keyboard shortcuts.
- Live client-side text filtering as the user types.
- Footer with keyboard navigation cues (arrows, Enter, ESC).

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

How to build it, step by step

1
Build a dark floating modal card with inset shadow and subtle border glow.
2
Add grouped action items with hotkey tags and interactive hover states.
3
Bind input event to show/hide items matching query in JavaScript.

Customisation tips

Add keyboard arrow navigation listener for full accessibility compliance.
In production, bind global keydown for Cmd+K (Mac) or Ctrl+K (Windows) to trigger modal visibility.