@cloudflare/kumo

Kumo is Cloudflare’s open-source React component library for building modern web applications. It provides a set of accessible, design-system-compliant UI components — buttons, inputs, dialogs, popovers, and more — built on top of Base UI primitives.

Because it is layered on Base UI, Kumo handles keyboard navigation, focus management, and ARIA attributes for you, so you get accessible behavior without wiring every detail yourself. It supports granular tree-shakeable imports, re-exports the underlying Base UI primitives for advanced use cases, and even ships a CLI for querying component documentation.

What You Get

• A library of accessible React components (Button, Input, Dialog, and more) with bundled styles
• Built-in keyboard navigation, focus management, and ARIA handling via Base UI
• Granular, tree-shakeable per-component imports
• Re-exported Base UI primitives for advanced composition
• A CLI to list components and read their documentation from the terminal
• A design-token system with semantic colors and an optional Figma plugin

Common Use Cases

• Building internal Cloudflare-style dashboards and web apps with a consistent design system
• Shipping accessible UI without hand-writing ARIA and focus logic
• Composing advanced interactions directly on the underlying Base UI primitives
• Keeping design and code in sync through semantic tokens and the Figma plugin

Under The Hood

Architecture - Kumo is a monorepo (pnpm workspaces) whose main package @cloudflare/kumo wraps Base UI primitives with Cloudflare’s styling and semantic color tokens. Components expose subpath exports (@cloudflare/kumo/components/button, /primitives/popover, /styles) so consumers tree-shake to just what they use, while a bundled CLI reads component metadata to answer ls/doc queries. Sibling packages cover a docs site and a Figma token-sync plugin. Tech Stack - TypeScript and React, built on Base UI, with @phosphor-icons/react, react, and react-dom as peer dependencies; tooling is pnpm-based with a docs site (Astro at localhost:4321) and CI/CD pipelines. Code Quality - Very actively developed and consistently maintained, with tests runnable per-package, comprehensive AGENTS.md development docs, and a token/design-system pipeline indicating mature engineering practices. API Design - Imports are ergonomic and explicit, styles are opt-in via a single @cloudflare/kumo/styles import, and the escape hatch of re-exported primitives means advanced users are never boxed in — a well-balanced developer experience.