Docs

Primeros pasos

Cmd+kit se instala desde npm. Elige el paquete que encaja con tu runtime, define tus comandos en código y después personaliza la palette con mensajes, tokens de tema y overrides de render.

Qué se instala

• @cmd-kit/react: componente listo para usar y hook para React
• @cmd-kit/vue: componente y API composable para Vue
• @cmd-kit/preact: adaptador para Preact con una API muy cercana a React
• @cmd-kit/astro: punto de entrada para Astro con integración basada en islas
• @cmd-kit/core: primitivas headless y runtime sin framework (createCommandPalette)

Elige el paquete correcto

• React: úsalo si tu UI ya es React y quieres la superficie empaquetada más completa
• Vue: úsalo si tu aplicación es Vue y quieres slots y una integración propia de Vue
• Preact: úsalo si buscas una API estilo React sobre un runtime más ligero
• Astro: úsalo si tu shell es Astro y quieres un paquete pensado para islas de Astro
• Core: úsalo si necesitas controlar toda la UI o integrar un runtime sin framework

Instalación

npm install @cmd-kit/react

Modelo de comandos

La palette se construye con secciones. Cada sección contiene ítems. Un ítem puede abrir un enlace, ejecutar un callback o navegar a secciones hijas.

const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      {
        id: "dashboard",
        title: "Dashboard",
        subtitle: "Open the main workspace",
        href: "/dashboard",
        shortcut: "G D"
      },
      {
        id: "settings",
        title: "Settings",
        children: [
          {
            id: "preferences",
            title: "Preferences",
            items: [
              { id: "theme", title: "Theme" },
              { id: "account", title: "Account" }
            ]
          }
        ]
      }
    ]
  }
];

Checklist de la primera integración

1. Elige el paquete que coincide con el runtime de tu UI.
2. Instálalo con tu gestor de paquetes junto con las peer dependencies que necesite.
3. Empieza con una o dos secciones raíz y unos pocos ítems.
4. Confirma que enlaces, callbacks y navegación anidada funcionan antes de estilizar mucho.
5. Después pasa a Personalización para iconos, estilos, mensajes y datos asíncronos.

Comandos recientes

recents está desactivado por defecto. Actívalo con recents={true} o configúralo con recents={{ limit, sectionTitle }}. Si quieres desactivarlo explícitamente, usa recents={false}.

FAQ