+ Kit command palette system

React

Integración con React

@cmd-kit/react incluye el componente CommandPalette y el hook useCommandPalette para integraciones más personalizadas.

Instalación

Gestor de paquetes 
npm install @cmd-kit/react

Uso básico

import { CommandPalette } from "@cmd-kit/react";

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

export function Example() {
  return <CommandPalette sections={sections} title="Comandos del proyecto" />;
}

Props principales

Iconos y layout de ítem

Usa renderItem cuando quieras controlar completamente la fila del ítem, incluyendo iconos, espaciado y metadatos.

<CommandPalette
  sections={sections}
  renderItem={(item, active) => (
    <div className={active ? "palette-row is-active" : "palette-row"}>
      <MyIcon name={item.id} />
      <div className="palette-row-copy">
        <strong>{item.title}</strong>
        {item.subtitle ? <span>{item.subtitle}</span> : null}
      </div>
    </div>
  )}
  title="Comandos del proyecto"
/>

Ejemplo de personalización

<CommandPalette
  classNames={{
    dialog: "palette-shell",
    item: "palette-item"
  }}
  messages={{
    searchPlaceholder: "Busca acciones",
    noResults: "No hay comandos para esta búsqueda."
  }}
  theme={{
    light: {
      accentColor: "#0fa6d8",
      backgroundColor: "#ffffff",
      textColor: "#0e1720"
    },
    dark: {
      accentColor: "#12b5e5",
      backgroundColor: "#0f1720",
      textColor: "#f5fbff"
    }
  }}
  sections={sections}
  title="Comandos del workspace"
/>

Fuente asíncrona

<CommandPalette
  source={async () => {
    const response = await fetch("/api/commands");
    return response.json();
  }}
  recents={{ limit: 6, sectionTitle: "Recientes" }}
  title="Comandos del workspace"
/>

Añadir un comando nuevo

Para añadir una opción nueva, agrega un nuevo ítem dentro de la sección correspondiente. shortcut es opcional: úsalo cuando quieras atajo de teclado y omítelo si solo debe ejecutarse con click/Enter.

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 desactivado por defecto. Actívalo con recents={true} o configúralo con recents={{ limit: 6, sectionTitle: 'Recientes' }}. Desactívalo con recents={false}.

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

FAQ

¿Cuándo uso CommandPalette y cuándo useCommandPalette?

Empieza por CommandPalette. Usa useCommandPalette cuando quieras orquestar estado y render por tu cuenta.

¿Cómo evito conflictos de atajos con mi aplicación?

Sobrescribe shortcut y usa una combinación que no choque con atajos globales del producto o del navegador.

¿Puedo controlar la apertura desde estado de React?

Sí. Usa open y onOpenChange en modo controlado, o defaultOpen en modo no controlado.

¿Cómo desactivo los comandos recientes en React?

Deja recents sin definir (apagado por defecto) o pásalo como recents={false}.

¿Cuál es la forma recomendada de cargar comandos desde API?

Usa source y devuelve la misma estructura (items y/o sections) que usarías en configuración estática.

¿Cómo personalizo bien la fila del ítem?

Usa renderItem si quieres control total de la fila o renderers para overrides puntuales (título, sección, estado vacío).