Cloudflare — Cloudflare's accessible, Base-UI-backed component library, open-sourced in February 2026.
Kumo is Cloudflare's current component library, succeeding the earlier cf-ui (a React/Redux/Fela framework Cloudflare open-sourced around 2017, now defunct). Kumo's first npm release (@cloudflare/kumo@1.0.0) was published 2026-02-03. It's built as a styling and behavior layer on top of Base UI headless primitives, using Tailwind v4.
Maintained by Cloudflare as a pnpm monorepo (component library, docs site, Figma plugin, screenshot worker) under the MIT license. New components go through a scaffolding CLI rather than being hand-created, and a component registry file is treated as the source of truth for component APIs. A linter enforces semantic theme tokens over raw Tailwind color classes.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
--text-color-kumo-brand
Brand-accent text color (Cloudflare orange), same in light and dark
--color-kumo-canvas
Page canvas background
--color-kumo-base
Default surface background
--text-color-kumo-danger
Destructive/error text
--text-color-kumo-success
Success/confirmation text
--text-base
Base body text size
Exactly what ships in cloudflare-kumo-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Kumo — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Cloudflare. "Kumo" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Kumo **Owner:** Cloudflare **Official documentation:** https://kumo-ui.com/ --- ## Summary Cloudflare's accessible, Base-UI-backed component library, open-sourced in February 2026. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `--text-color-kumo-brand` | `#f6821f` | Brand-accent text color (Cloudflare orange), same in light and dark | | `--color-kumo-canvas` | `oklch(98.75% 0 0) light / oklch(10% 0 0) dark` | Page canvas background | | `--color-kumo-base` | `#fff light / oklch(17% 0 0) dark` | Default surface background | | `--text-color-kumo-danger` | `oklch(50.5% 0.213 27.518) light / oklch(70.4% 0.191 22.216) dark` | Destructive/error text | | `--text-color-kumo-success` | `oklch(43.2% 0.095 166.913) light / oklch(90.5% 0.093 164.15) dark` | Success/confirmation text | | `--text-base` | `14px` | Base body text size | ## Origin Kumo is Cloudflare's current component library, succeeding the earlier cf-ui (a React/Redux/Fela framework Cloudflare open-sourced around 2017, now defunct). Kumo's first npm release (@cloudflare/kumo@1.0.0) was published 2026-02-03. It's built as a styling and behavior layer on top of Base UI headless primitives, using Tailwind v4. ## Governance Maintained by Cloudflare as a pnpm monorepo (component library, docs site, Figma plugin, screenshot worker) under the MIT license. New components go through a scaffolding CLI rather than being hand-created, and a component registry file is treated as the source of truth for component APIs. A linter enforces semantic theme tokens over raw Tailwind color classes. ## Known for - A large, real component surface published as granular subpath exports — 45+ styled components (Dialog, CommandPalette, DateRangePicker, Table, Toast) plus a separate, lower-level primitives layer wrapping Base UI. - An in-repo Figma plugin (packages/kumo-figma) for code-to-design sync, built and maintained by Cloudflare's own team. - Machine-readable component metadata shipped in the package itself, intended for AI coding agents to consume directly. ## Underrated - The primitives-vs-components split is unusually clean — you can consume just the accessible Base UI behavior without Cloudflare's visual opinions if you want your own skin. - A dedicated FedRAMP theme file alongside the default theme suggests real compliance-driven theming work, not just light/dark mode. ## Watch out for - It's very young as a public project — first public npm release was February 2026, so long-term API stability and community size are both unproven. - Tightly coupled to Tailwind v4's @theme syntax and Base UI as a peer dependency; adopting it means adopting that specific stack, not just importing components. ## Components worth studying - **Dialog** — Published as a component subpath export, styled on top of the Base UI dialog primitive. - **CommandPalette** — A command-menu component in the public export list. - **DateRangePicker** — Published as its own component subpath export. ## When to choose Kumo Consider Kumo if you're already on React + Tailwind v4 and want accessible headless behavior (via Base UI) with Cloudflare's opinionated dashboard-style skin on top. Too new and too stack-specific to treat as a safe long-term bet yet — evaluate the primitives layer on its own merits if you want to de-risk it. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Kumo by Cloudflare — Cloudflare's accessible, Base-UI-backed component library, open-sourced in February 2026. Lean into what it's known for: A large, real component surface published as granular subpath exports — 45+ styled components (Dialog, CommandPalette, DateRangePicker, Table, Toast) plus a separate, lower-level primitives layer wrapping Base UI. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Kumo docs](https://kumo-ui.com/) - [GitHub repo](https://github.com/cloudflare/kumo) - [npm package](https://www.npmjs.com/package/@cloudflare/kumo) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/cloudflare-kumo) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Consider Kumo if you're already on React + Tailwind v4 and want accessible headless behavior (via Base UI) with Cloudflare's opinionated dashboard-style skin on top. Too new and too stack-specific to treat as a safe long-term bet yet — evaluate the primitives layer on its own merits if you want to de-risk it.
Where next
