search command-palette spotlight keyboard navigation command-palette spotlight search keyboard cmd-k command palette like VS Code or Raycast spotlight search with grouped results
Search Command Palette
Fetch pattern JSON:
curl https://webspire.de/patterns/search/command-palette.json command-palette.html
<div class="ws-search mx-auto max-w-xl rounded-xl border border-[var(--ws-search-border)] bg-[var(--ws-search-bg)] shadow-2xl">
<!-- Search input -->
<div class="flex items-center border-b border-[var(--ws-search-border)] px-4">
<svg class="h-5 w-5 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
<input type="search" placeholder="Type a command or search..." class="w-full border-0 bg-transparent px-3 py-4 text-sm text-[var(--ws-search-text)] placeholder:text-[var(--ws-search-text-soft)] focus:outline-none" aria-label="Command palette search">
<kbd class="hidden flex-shrink-0 rounded-md border border-[var(--ws-search-border)] bg-[var(--ws-search-bg)] px-2 py-0.5 text-xs text-[var(--ws-search-text-soft)] sm:inline-block">⌘K</kbd>
</div>
<!-- Results -->
<div class="max-h-80 overflow-y-auto p-2">
<!-- Pages group -->
<div class="px-2 py-1.5">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-search-text-soft)]">Pages</p>
</div>
<ul role="listbox">
<li role="option" class="flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 transition hover:bg-[var(--ws-search-accent)]/10">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-search-text)]">Dashboard</p>
<p class="text-xs text-[var(--ws-search-text-soft)]">Main overview and metrics</p>
</div>
</li>
<li role="option" class="flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 transition hover:bg-[var(--ws-search-accent)]/10">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-search-text)]">Team Members</p>
<p class="text-xs text-[var(--ws-search-text-soft)]">Manage your team and permissions</p>
</div>
</li>
<li role="option" class="flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 transition hover:bg-[var(--ws-search-accent)]/10">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-search-text)]">Analytics</p>
<p class="text-xs text-[var(--ws-search-text-soft)]">Traffic and conversion reports</p>
</div>
</li>
</ul>
<!-- Documentation group -->
<div class="mt-2 px-2 py-1.5">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-search-text-soft)]">Documentation</p>
</div>
<ul role="listbox">
<li role="option" class="flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 transition hover:bg-[var(--ws-search-accent)]/10">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/></svg>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-search-text)]">Getting Started Guide</p>
<p class="text-xs text-[var(--ws-search-text-soft)]">Installation and initial setup</p>
</div>
</li>
<li role="option" class="flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 transition hover:bg-[var(--ws-search-accent)]/10">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-search-text)]">API Reference</p>
<p class="text-xs text-[var(--ws-search-text-soft)]">Endpoints, authentication, and examples</p>
</div>
</li>
</ul>
<!-- Settings group -->
<div class="mt-2 px-2 py-1.5">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-search-text-soft)]">Settings</p>
</div>
<ul role="listbox">
<li role="option" class="flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 transition hover:bg-[var(--ws-search-accent)]/10">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-search-text)]">Account Settings</p>
<p class="text-xs text-[var(--ws-search-text-soft)]">Profile, security, and preferences</p>
</div>
</li>
</ul>
</div>
<!-- Footer -->
<div class="flex items-center justify-between border-t border-[var(--ws-search-border)] px-4 py-2.5 text-xs text-[var(--ws-search-text-soft)]">
<span>Navigate with <kbd class="rounded border border-[var(--ws-search-border)] px-1">↑</kbd> <kbd class="rounded border border-[var(--ws-search-border)] px-1">↓</kbd></span>
<span>Open with <kbd class="rounded border border-[var(--ws-search-border)] px-1">Enter</kbd></span>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
searchcommand-palettespotlightkeyboardnavigation
Slots
| Name | Required | Description |
|---|---|---|
| input | Yes | Search input with keyboard shortcut hint. |
| results | Yes | Grouped result sections. |
| footer | No | Keyboard navigation hints. |
Command palette variant inspired by VS Code and Raycast. Features a large search input with Cmd+K keyboard hint, grouped result sections (Pages, Documentation, Settings), and keyboard navigation footer. Each result shows an icon, title, and description.