1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación commandsearchnavigation

Command Palette UI

Interfaz de paleta de comandos con buscador rápido y lista de acciones sugeridas.

🔍 Type a command...
📄 Create new page⌘N
🚀 Deploy to Vercel⌘D
⚙️ Open settings⌘,

Uso

Copia y pega este código directamente en tu página de Astro:

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

<CommandPaletteUi>Content</CommandPaletteUi>
--- import { CommandPaletteUI } from 'astro-component-kit'; --- <CommandPaletteUi>Content</CommandPaletteUi>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/CommandPaletteUI.astro:

astro 
---
---
<div class="cmd-palette">
  <div class="cmd-search">🔍 Type a command...</div>
  <div class="cmd-list">
    <div class="cmd-item"><span>📄 Create new page</span><kbd>⌘N</kbd></div>
    <div class="cmd-item"><span>🚀 Deploy to Vercel</span><kbd>⌘D</kbd></div>
    <div class="cmd-item"><span>⚙️ Open settings</span><kbd>⌘,</kbd></div>
  </div>
</div>
<style>
  .cmd-palette { background: #0f172a; border: 1px solid #334155; border-radius: 12px; width: 100%; max-width: 500px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; }
  .cmd-search { padding: 1rem; border-bottom: 1px solid #334155; color: #64748b; font-size: 0.9rem; }
  .cmd-item { display: flex; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; transition: 0.2s; color: #fff; font-size: 0.85rem; }
  .cmd-item:hover { background: #1e293b; }
  kbd { background: #111; border: 1px solid #333; padding: 2px 5px; border-radius: 4px; font-size: 0.7rem; color: #94a3b8; }
</style>
--- --- <div class="cmd-palette"> <div class="cmd-search">🔍 Type a command...</div> <div class="cmd-list"> <div class="cmd-item"><span>📄 Create new page</span><kbd>⌘N</kbd></div> <div class="cmd-item"><span>🚀 Deploy to Vercel</span><kbd>⌘D</kbd></div> <div class="cmd-item"><span>⚙️ Open settings</span><kbd>⌘,</kbd></div> </div> </div> <style> .cmd-palette { background: #0f172a; border: 1px solid #334155; border-radius: 12px; width: 100%; max-width: 500px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; } .cmd-search { padding: 1rem; border-bottom: 1px solid #334155; color: #64748b; font-size: 0.9rem; } .cmd-item { display: flex; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; transition: 0.2s; color: #fff; font-size: 0.85rem; } .cmd-item:hover { background: #1e293b; } kbd { background: #111; border: 1px solid #333; padding: 2px 5px; border-radius: 4px; font-size: 0.7rem; color: #94a3b8; } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
CommandPaletteUI.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
commandsearchnavigation