Kumo: primero leer la documentación de componentes, luego conectar la UI de Cloudflare

Para quién es

Kumo se dirige a quien construye interfaces de apps Web modernas, sobre todo el front ya en React que quiere manejar menos teclado, foco y ARIA por su cuenta. Es la biblioteca de componentes de Cloudflare, construida sobre Base UI. La página correspondiente es https://base-ui.com/ Las notas dicen que gestiona la navegación por teclado, el foco y los atributos ARIA para que armes una interfaz según un sistema de diseño.

Un uso más cercano: te dispones a introducir @cloudflare/kumo en un proyecto React, primero confirmas que las dependencias pares react, react-dom, @phosphor-icons/react se pueden instalar, luego importas Button, Input, Dialog y estilos según haga falta. No encaja como habilidad slash de un asistente de código, ni en un proyecto sin React.

El repositorio no escribe comandos equivalentes de otros gestores de paquetes, así que el camino principal solo sigue el pnpm que da. Si tu repositorio no usa pnpm, las notas existentes se detienen aquí; no reescribas este comando en un instalador no registrado.

Completar el primer intento en 3 minutos

El comando de instalación oficial es: pnpm add @cloudflare/kumo. La dirección del repositorio es https://github.com/cloudflare/kumo Opera solo según esta página. El comando oficial de dependencias pares es: pnpm add react react-dom @phosphor-icons/react. Si el proyecto ya tiene React, primero comprueba si la versión aún necesita otra capa de instalación; no reinstales a ciegas.

Requisito: esta máquina tiene pnpm, y tienes una app local que puedes tirar o que ya usa React. La ubicación de instalación son las dependencias de esa app, no un directorio de habilidad global.

Primera tarea de bajo riesgo: no cambies aún una página. En el directorio del proyecto ejecuta npx @cloudflare/kumo ls, listando solo todos los componentes. Señal de éxito: el terminal imprime una lista de componentes y tu página no ha sido cambiada. Para una nota más, usa npx @cloudflare/kumo doc Button para ver la documentación de Button en solo lectura; npx @cloudflare/kumo docs trae toda la documentación y la primera vez se puede omitir.

Tras confirmar la lista, si de verdad hay que conectar, pon esto en una página de prueba que no vaya a producción: importar Button, Input, Dialog desde @cloudflare/kumo, y import "@cloudflare/kumo/styles". Antes de escribir, mira el diff y confirma que solo se movieron la página de prueba y la lista de dependencias. Las notas no escriben personalización de tema ni pasos de renderizado en servidor, así que la primera vez quédate en «poder listar componentes, y una página de prueba puede renderizar un Button».

Casos de uso

Caso 1: introducir componentes habituales en una app React. Primero pnpm add @cloudflare/kumo, completar dependencias pares, luego import { Button, Input, Dialog } from "@cloudflare/kumo" y cargar @cloudflare/kumo/styles. Encaja cuando ya tienes un esqueleto de página y solo quieres pasar a este conjunto accesible. Las notas solo nombran estos tres componentes como ejemplo; los demás nombres siguen npx @cloudflare/kumo ls — no adivines.

Caso 2: consultar documentación en solo lectura con el CLI. npx @cloudflare/kumo ls lista todos los componentes, npx @cloudflare/kumo doc Button trae la documentación de uno, npx @cloudflare/kumo docs trae toda. Encaja cuando aún no has decidido qué página cambiar y primero quieres comprobar la API. Las notas no escriben el formato de salida ni una caché sin conexión; consultar basta, no hace falta cambiar código de inmediato. Si un comando falla, vuelve a https://github.com/cloudflare/kumo y contrasta; no pases a un modo de instalación no registrado.

Límites de uso

Límite de instalación: lo oficial solo escribe pnpm add @cloudflare/kumo y las dependencias pares react, react-dom, @phosphor-icons/react; no uses un instalador que nunca se registró. Límite de ejecución: el ejemplo son componentes React y una entrada de estilos; no escriben un uso sin React. Límite de capacidad: gestiona teclado, foco y ARIA, y afirma ceñirse a un sistema de diseño; no escriben que el tema visual deba igualar cada página del sitio Cloudflare. Límite CLI: se puede comprobar ls, doc Button, docs. La biblioteca base es Base UI, ver https://base-ui.com/ pero las notas no hacen corresponder uno a uno todos los componentes de Kumo y Base UI.