Astro

Integración con Astro

@cmd-kit/astro es el paquete de Astro para Cmd+kit. Renderiza la command palette por defecto directamente en Astro y mantiene el mismo modelo de comandos y la misma superficie de personalización que el resto de adaptadores.

Cuándo usar el paquete de Astro

• Usa @cmd-kit/astro cuando Astro sea el shell de la página y quieras la integración empaquetada más rápida sin depender de React.
• Quédate en el paquete de Astro si tu palette puede configurarse con props serializables como secciones, mensajes, tema y recientes.
• Pasa a @cmd-kit/core solo cuando necesites un render totalmente custom más allá del componente empaquetado de Astro.
• Usa otro adaptador solo si tu producto ya depende de ese framework para UI interactiva.

Instalación

npm install @cmd-kit/astro

Uso básico

---
import CommandPalette from "@cmd-kit/astro/component";

const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      { id: "dashboard", title: "Dashboard", href: "/dashboard" }
    ]
  }
];
---

<CommandPalette sections={sections} title="Comandos del proyecto" />

Requisitos de runtime

No necesitas integración de React. Instala @cmd-kit/astro en tu proyecto Astro y usa el componente directamente.

Personalización

La superficie de personalización es la misma que en el resto de adaptadores: sections, messages, theme (modo simple o dual), recents y reducedMotion.

---
import CommandPalette from "@cmd-kit/astro/component";

const sections = [
  {
    id: "workspace",
    title: "Workspace",
    items: [
      { id: "search-docs", title: "Buscar documentación", href: "/docs" }
    ]
  }
];
---

<CommandPalette
  sections={sections}
  messages={{
    searchPlaceholder: "Busca docs, páginas o acciones",
    noResults: "No hay ningún comando para esta búsqueda."
  }}
  theme={{
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#12b5e5", backgroundColor: "#0f1720" }
  }}
  title="Comandos del proyecto"
/>

Añadir un comando nuevo

Para añadir una opción nueva, crea un nuevo ítem en tu lista de secciones. shortcut es opcional.

---
const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      { id: "dashboard", title: "Dashboard", href: "/dashboard" },
      { id: "billing", title: "Billing", href: "/billing", shortcut: "mod+b" },
      { id: "support", title: "Support", href: "/support" }
    ]
  }
];
---

Comandos recientes

recents es opcional y viene apagado por defecto. Actívalo con recents={true} o configúralo con recents={{ limit, sectionTitle }}. Desactívalo con recents={false}.

<CommandPalette
  sections={sections}
  recents={false}
  title="Comandos del proyecto"
/>

Cuándo pasar a Core

Cuando necesites callbacks, comportamiento avanzado o render completamente custom, pasa a @cmd-kit/core y construye tu propia capa de UI. Mantén @cmd-kit/astro para la experiencia empaquetada por defecto.

FAQ