cmdk

Qué es

cmdk es un componente de React, sin estilos y totalmente componible, para construir menús de comandos: esas paletas que se abren con Cmd+K para buscar y ejecutar acciones. Lo creó Paco Coursey (cuya cuenta de GitHub es ahora dip) y se popularizó al inspirar la paleta de comandos de Vercel. Está escrito en TypeScript y se apoya en el componente Dialog de Radix UI cuando se usa en modo modal.

Para qué sirve

• Añadir una paleta de comandos (Cmd+K) para navegar y ejecutar acciones rápidamente.
• Construir un combobox o buscador con filtrado y ordenación automáticos.
• Crear menús con navegación por “páginas” anidadas entre conjuntos de elementos.
• Ofrecer una búsqueda accesible, probada con lectores de pantalla y con atributos ARIA.

Cuándo usarlo

Encaja cuando quieres una paleta de comandos en una app React y prefieres controlar tú el diseño: cmdk no impone estilos, solo expone selectores por data-attributes (como [cmdk-root] o [cmdk-item]) para que apliques tu CSS. Si buscas algo ya estilizado, conviene mirar la versión que integra shadcn/ui (que usa cmdk por debajo) o componentes equivalentes de bibliotecas como Radix Themes o Headless UI.

Ejemplo

Instalación con npm:

npm install cmdk

Uso básico de la paleta:

import { Command } from 'cmdk'

function CommandMenu() {
  return (
    <Command label="Menú de comandos">
      <Command.Input placeholder="Escribe un comando o busca..." />
      <Command.List>
        <Command.Empty>Sin resultados.</Command.Empty>
        <Command.Group heading="Acciones">
          <Command.Item>Crear nuevo</Command.Item>
          <Command.Item>Buscar archivo</Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  )
}

Para una paleta modal que se abre con Cmd+K se usa el componente Command.Dialog, controlando su estado de apertura con useState y un listener de teclado.

Puntos clave

• API componible: los elementos pueden envolverse en otros componentes o ser JSX estático.
• Filtrado y ordenación automáticos de los elementos según lo que escribe el usuario.
• Sin estilos por defecto: control total del diseño mediante selectores por data-attributes.
• Accesible: atributos ARIA y soporte probado con lectores de pantalla.
• Modos en diálogo (overlay) o en línea, y navegación por páginas anidadas.

Ten en cuenta

Requiere React 18 o superior, ya que usa hooks como useId y useSyncExternalStore. Al ser un componente sin estilos, tendrás que escribir todo el CSS, lo que da flexibilidad pero exige más trabajo inicial; si quieres algo listo para usar, la integración de shadcn/ui sobre cmdk es una alternativa más rápida. El repositorio pacocoursey/cmdk redirige a dip/cmdk por el cambio de nombre del autor: ambas URL apuntan al mismo proyecto canónico.