Kumo: primeiro ler a documentação dos componentes, depois ligar a UI da Cloudflare

Para quem serve

Kumo dirige-se a quem constrói interfaces de apps Web modernas, sobretudo o front já em React que quer tratar menos teclado, foco e ARIA por si. É a biblioteca de componentes da Cloudflare, construída sobre Base UI. A página correspondente é https://base-ui.com/ As notas dizem que trata da navegação por teclado, da gestão de foco e dos atributos ARIA para montar uma interface segundo um sistema de design.

Um uso mais próximo: prepara-se para introduzir @cloudflare/kumo num projeto React, primeiro confirma que as dependências pares react, react-dom, @phosphor-icons/react se instalam, depois importa Button, Input, Dialog e estilos conforme precise. Não serve como competência slash de um assistente de código, nem a um projeto sem React.

O repositório não escreve comandos equivalentes de outros gestores de pacotes, por isso o caminho principal só segue o pnpm que dá. Se o seu repositório não usa pnpm, as notas existentes param aqui; não reescreva este comando num instalador não registado.

Concluir a primeira tentativa em 3 minutos

O comando de instalação oficial é: pnpm add @cloudflare/kumo. O endereço do repositório é https://github.com/cloudflare/kumo Opere só segundo esta página. O comando oficial das dependências pares é: pnpm add react react-dom @phosphor-icons/react. Se o projeto já tem React, primeiro verifique se a versão ainda precisa de outra camada de instalação; não reinstale às cegas.

Pré-requisito: esta máquina tem pnpm, e tem uma app local que pode deitar fora ou que já usa React. O local de instalação são as dependências dessa app, não um diretório de competência global.

Primeira tarefa de baixo risco: ainda não mude uma página. No diretório do projeto execute npx @cloudflare/kumo ls, listando só todos os componentes. Sinal de sucesso: o terminal imprime uma lista de componentes e a sua página não foi mudada. Para mais uma nota, use npx @cloudflare/kumo doc Button para ver a documentação de Button só de leitura; npx @cloudflare/kumo docs traz toda a documentação e na primeira vez pode omitir-se.

Após confirmar a lista, se for mesmo preciso ligar, ponha isto numa página de ensaio que não vá a produção: importar Button, Input, Dialog de @cloudflare/kumo, e import "@cloudflare/kumo/styles". Antes de escrever, veja o diff e confirme que só se moveram a página de ensaio e a lista de dependências. As notas não escrevem personalização de tema nem passos de renderização no servidor, por isso na primeira vez fique em «conseguir listar componentes, e uma página de ensaio consegue renderizar um Button».

Casos de uso

Caso 1: introduzir componentes habituais numa app React. Primeiro pnpm add @cloudflare/kumo, completar dependências pares, depois import { Button, Input, Dialog } from "@cloudflare/kumo" e carregar @cloudflare/kumo/styles. Serve quando já tem um esqueleto de página e só quer passar a este conjunto acessível. As notas só nomeiam estes três componentes como exemplo; os outros nomes seguem npx @cloudflare/kumo ls — não adivinhe.

Caso 2: consultar documentação só de leitura com o CLI. npx @cloudflare/kumo ls lista todos os componentes, npx @cloudflare/kumo doc Button traz a documentação de um, npx @cloudflare/kumo docs traz toda. Serve quando ainda não decidiu que página mudar e primeiro quer verificar a API. As notas não escrevem o formato de saída nem uma cache offline; consultar chega, não é preciso mudar código de imediato. Se um comando falhar, volte a https://github.com/cloudflare/kumo e confronte; não passe a um modo de instalação não registado.

Limites de uso

Limite de instalação: o oficial só escreve pnpm add @cloudflare/kumo e as dependências pares react, react-dom, @phosphor-icons/react; não use um instalador que nunca foi registado. Limite de execução: o exemplo são componentes React e uma entrada de estilos; não escrevem um uso sem React. Limite de capacidade: trata teclado, foco e ARIA, e afirma seguir um sistema de design; não escrevem que o tema visual tenha de igualar cada página do sítio Cloudflare. Limite CLI: pode verificar-se ls, doc Button, docs. A biblioteca de base é Base UI, ver https://base-ui.com/ mas as notas não fazem corresponder um a um todos os componentes Kumo e Base UI.