Kumo : d’abord lire la doc des composants, puis brancher l’UI Cloudflare

À qui cela s’adresse

Kumo s’adresse à qui construit des interfaces d’appli Web modernes, surtout le front déjà sur React qui veut moins gérer clavier, focus et ARIA soi-même. C’est la bibliothèque de composants Cloudflare, bâtie sur Base UI. La page correspondante est https://base-ui.com/ Les notes disent qu’elle gère la navigation clavier, la gestion du focus et les attributs ARIA, pour assembler une interface selon un système de design.

Un usage plus proche : vous vous apprêtez à introduire @cloudflare/kumo dans un projet React, confirmez d’abord que les dépendances paires react, react-dom, @phosphor-icons/react s’installent, puis importez Button, Input, Dialog et les styles selon besoin. Elle ne convient pas comme compétence slash d’un assistant de code, ni à un projet sans React.

Le dépôt n’écrit pas de commandes équivalentes pour d’autres gestionnaires de paquets, donc le chemin principal ne suit que le pnpm donné. Si votre dépôt n’utilise pas pnpm, les notes existantes s’arrêtent ici ; ne réécrivez pas cette commande en un installeur non consigné.

Première tentative en 3 minutes

La commande d’install officielle est : pnpm add @cloudflare/kumo. L’adresse du dépôt est https://github.com/cloudflare/kumo N’opérez que d’après cette page. La commande officielle des dépendances paires est : pnpm add react react-dom @phosphor-icons/react. Si le projet a déjà React, vérifiez d’abord si la version exige encore une couche d’install ; ne réinstallez pas à l’aveugle.

Préalable : cette machine a pnpm, et vous avez une appli locale jetable ou qui utilise déjà React. L’emplacement d’installation est les dépendances de cette appli, pas un répertoire de compétence global.

Première tâche à faible risque : ne changez pas encore de page. Dans le répertoire du projet, exécutez npx @cloudflare/kumo ls, en listant seulement tous les composants. Signal de réussite : le terminal imprime une liste de composants, et votre page n’a pas été changée. Pour une note de plus, utilisez npx @cloudflare/kumo doc Button pour voir la doc Button en lecture seule ; npx @cloudflare/kumo docs prend toute la doc et peut être sauté la première fois.

Après confirmation de la liste, s’il faut vraiment brancher, mettez ceci sur une page d’essai qui ne partira pas en ligne : importer Button, Input, Dialog depuis @cloudflare/kumo, et import "@cloudflare/kumo/styles". Avant d’écrire, regardez le diff et confirmez que seuls la page d’essai et la liste de dépendances ont bougé. Les notes n’écrivent pas de personnalisation de thème ni d’étapes de rendu serveur, donc la première fois restez à « pouvoir lister les composants, et une page d’essai peut rendre un Button ».

Cas d’usage

Cas 1 : introduire des composants courants dans une appli React. D’abord pnpm add @cloudflare/kumo, compléter les dépendances paires, puis import { Button, Input, Dialog } from "@cloudflare/kumo" et charger @cloudflare/kumo/styles. Convient quand vous avez déjà un squelette de page et voulez seulement passer à cet ensemble accessible. Les notes ne nomment que ces trois composants en exemple ; les autres noms suivent npx @cloudflare/kumo ls — ne devinez pas.

Cas 2 : consulter la doc en lecture seule avec le CLI. npx @cloudflare/kumo ls liste tous les composants, npx @cloudflare/kumo doc Button prend la doc d’un composant, npx @cloudflare/kumo docs prend toute la doc. Convient quand vous n’avez pas encore décidé quelle page changer et voulez d’abord vérifier l’API. Les notes n’écrivent ni le format de sortie de la doc ni un cache hors ligne ; consulter suffit, inutile de changer le code tout de suite. Si une commande échoue, revenez à https://github.com/cloudflare/kumo et recoupez ; ne passez pas à un mode d’install non consigné.

Limites d’usage

Limite d’install : l’officiel n’écrit que pnpm add @cloudflare/kumo et les dépendances paires react, react-dom, @phosphor-icons/react ; n’utilisez pas un installeur jamais consigné. Limite d’exécution : l’exemple est des composants React et une entrée de styles ; aucun usage sans React n’est écrit. Limite de capacité : elle gère navigation clavier, focus et ARIA, et prétend coller à un système de design ; elle n’écrit pas que le thème visuel égale chaque page du site Cloudflare. Limite CLI : on peut vérifier ls, doc Button, docs. La bibliothèque de base est Base UI, voir https://base-ui.com/ mais les notes ne font pas correspondre un à un tous les composants Kumo et Base UI.