Kumo UI (Cloudflare)

Overview

Kumo UI is Cloudflare's official open-source component library designed for building modern, high-reliability web applications. Engineered on top of Base UI primitives, Kumo delivers enterprise-grade accessibility, precise focus management, and keyboard navigation out of the box, paired with Cloudflare's refined design system.

Key Features

• 🛡️ Base UI Primitives Engine: Inherits robust unstyled primitives from Base UI for WAI-ARIA compliance, composability, and bulletproof keyboard navigation.
• 🎨 Semantic Design Tokens: Deeply integrated token architecture supporting light/dark themes and seamless synchronization via a dedicated Figma plugin.
• ⚡ Granular Tree-Shaking: Supports subpath imports (e.g. @cloudflare/kumo/components/button) ensuring near-zero bundle overhead in production.
• 🤖 Agent-First CLI Ecosystem: Includes an interactive CLI (npx @cloudflare/kumo ls/doc) that allows both developers and AI agents to query component API definitions instantly.

Installation & Quick Start

pnpm add @cloudflare/kumo react react-dom @phosphor-icons/react

import React from "react";
import { Button, Dialog, Input } from "@cloudflare/kumo";
import "@cloudflare/kumo/styles";

export function KumoDemo() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <Input placeholder="Enter your project name..." />
      <div className="flex gap-2">
        <Button variant="primary">Deploy Worker</Button>
        <Button variant="secondary">Settings</Button>
      </div>
    </div>
  );
}

Why Choose Kumo UI?

1. Cloudflare Production Standard: Built and battle-tested by Cloudflare for mission-critical dashboards and developer consoles.
2. Best-of-Breed Accessibility: Zero-compromise ARIA compliance and state management by leveraging Base UI under the hood.
3. Ideal For: Teams building SaaS platforms, developer tools, cloud infrastructure consoles, and modern React 19 / Vite / Next.js web applications.