Overlays commandoverlaysearch

Command Palette Overlay

Search-first command center overlay for advanced site navigation.

Search commands... Esc
Recent: Dashboard ↵
Docs: Navigation ↵

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { CommandPaletteOverlay } from 'astro-component-kit';
---

<CommandDialog>Content</CommandDialog>
--- import { CommandPaletteOverlay } from 'astro-component-kit'; --- <CommandDialog>Content</CommandDialog>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/CommandPaletteOverlay.astro and paste the following code:

astro 
---
---
<div class="cmd-overlay">
  <div class="cmd-box">
    <div class="cmd-input"><input type="text" placeholder="Search commands..." /></div>
    <div class="cmd-results">
        <div class="res"><span>Recent: Dashboard</span><kbd>↵</kbd></div>
        <div class="res"><span>Docs: Navigation</span><kbd>↵</kbd></div>
    </div>
  </div>
</div>
<style>
  .cmd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; justify-content: center; padding-top: 15vh; z-index: 3000; }
  .cmd-box { width: 100%; max-width: 600px; background: #080b14; border: 1px solid #334155; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,0.8); }
  .cmd-input input { width: 100%; padding: 1.25rem; background: transparent; border: none; border-bottom: 1px solid #1e293b; color: #fff; outline: none; font-size: 1.1rem; }
  .res { display: flex; justify-content: space-between; padding: 0.75rem 1.25rem; color: #94a3b8; font-size: 0.9rem; cursor: pointer; }
  .res:hover { background: #1e293b; color: #fff; }
  kbd { background: #111; padding: 2px 4px; border-radius: 4px; font-size: 0.7rem; }
</style>
--- --- <div class="cmd-overlay"> <div class="cmd-box"> <div class="cmd-input"><input type="text" placeholder="Search commands..." /></div> <div class="cmd-results"> <div class="res"><span>Recent: Dashboard</span><kbd>↵</kbd></div> <div class="res"><span>Docs: Navigation</span><kbd>↵</kbd></div> </div> </div> </div> <style> .cmd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; justify-content: center; padding-top: 15vh; z-index: 3000; } .cmd-box { width: 100%; max-width: 600px; background: #080b14; border: 1px solid #334155; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,0.8); } .cmd-input input { width: 100%; padding: 1.25rem; background: transparent; border: none; border-bottom: 1px solid #1e293b; color: #fff; outline: none; font-size: 1.1rem; } .res { display: flex; justify-content: space-between; padding: 0.75rem 1.25rem; color: #94a3b8; font-size: 0.9rem; cursor: pointer; } .res:hover { background: #1e293b; color: #fff; } kbd { background: #111; padding: 2px 4px; border-radius: 4px; font-size: 0.7rem; } </style>

Quick Info

Category
Overlays
Filename
CommandPaletteOverlay.astro
Dependencies
None — pure Astro + CSS
Tags
commandoverlaysearch