Kumo: Read the component docs first, then attach Cloudflare UI

Who it is for

Kumo is for people building modern web-app interfaces, especially frontend folks already on React who want to handle less keyboard, focus, and ARIA detail themselves. It is Cloudflare’s component library, built on Base UI. The matching page is https://base-ui.com/ The notes say it handles keyboard navigation, focus management, and ARIA attributes so you can assemble an interface to a design system.

A closer fit: you are ready to bring @cloudflare/kumo into a React project, first confirm the peer dependencies react, react-dom, @phosphor-icons/react can install, then import Button, Input, Dialog, and styles as needed. It does not fit as a slash skill for a coding assistant, and it does not fit a project without React.

The repository does not write equivalent commands for other package managers, so the main path follows only the pnpm it gives. If your repository does not use pnpm, the existing notes stop here; do not rewrite this command into an unrecorded installer.

First attempt in 3 minutes

The official install command is: pnpm add @cloudflare/kumo. The repository address is https://github.com/cloudflare/kumo Operate only from this page. The official peer-dependency command is: pnpm add react react-dom @phosphor-icons/react. If the project already has React, first check whether the version still needs another install layer; do not blindly reinstall.

Prerequisite: this machine has pnpm, and you have a local app you can discard or that already uses React. The install location is that app’s dependencies, not a global skill directory.

Low-risk first task: do not change a page yet. In the project directory run npx @cloudflare/kumo ls, printing all components only. Success signal: the terminal prints a component list, and your page has not been changed. To read one more note, use npx @cloudflare/kumo doc Button to view Button docs read-only; npx @cloudflare/kumo docs fetches all docs and can be skipped the first time.

After you confirm the list, if you truly need to attach it, put this on a trial page that will not go live: import Button, Input, Dialog from @cloudflare/kumo, and import "@cloudflare/kumo/styles". Before writing, look at the diff and confirm only the trial page and the dependency list moved. The notes do not write theme customization or server-render steps, so the first time stop at “can list components, and a trial page can render one Button.”

Usage cases

Case 1: Bring common components into a React app. First pnpm add @cloudflare/kumo, complete peer dependencies, then import { Button, Input, Dialog } from "@cloudflare/kumo" and load @cloudflare/kumo/styles. It fits when you already have a page skeleton and only want to switch to this accessible set. The notes name only these three components as examples; other component names follow npx @cloudflare/kumo ls — do not guess.

Case 2: Use the CLI to look up docs read-only. npx @cloudflare/kumo ls lists all components, npx @cloudflare/kumo doc Button fetches a single component’s docs, npx @cloudflare/kumo docs fetches all docs. It fits when you have not decided which page to change and first want to check the API. The notes do not write the docs output format and do not write an offline cache; looking them up is enough, you need not change code at once. If a command fails, return to https://github.com/cloudflare/kumo and compare; do not switch to an unrecorded install method.

Boundaries

Install boundary: official notes only write pnpm add @cloudflare/kumo and the peer dependencies react, react-dom, @phosphor-icons/react; do not use an installer that was never recorded. Runtime boundary: the example is React components and a styles entry; they do not write a no-React usage. Capability boundary: it handles keyboard navigation, focus management, and ARIA, and claims to match a design system; they do not write that the visual theme must equal every page of the Cloudflare site. CLI boundary: what you can check is ls, doc Button, docs. The base library is Base UI, see https://base-ui.com/ but the notes do not map every Kumo component one-to-one onto Base UI.