Kumo

Cloudflare's component library for building modern web applications.

Kumo provides accessible, design-system-compliant UI components built on Base UI. It handles keyboard navigation, focus management, and ARIA attributes so you can build accessible applications without thinking through every detail.

<img width="2560" height="1456" alt="image" src="https://github.com/user-attachments/assets/032f5a0e-b686-4440-b1ca-6182379479aa" />

Installation

pnpm add @cloudflare/kumo

Peer Dependencies

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

Usage

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

Granular Imports (Tree-Shaking)

import { Button } from "@cloudflare/kumo/components/button";

Base UI Primitives

Kumo re-exports all Base UI primitives for advanced use cases:

import { Popover } from "@cloudflare/kumo/primitives/popover";

CLI

Query component documentation from the command line:

npx @cloudflare/kumo ls          # List all components
npx @cloudflare/kumo doc Button  # Get component docs
npx @cloudflare/kumo docs        # Get all docs

Development

See AGENTS.md for comprehensive development documentation including:

• Component patterns and styling system
• Semantic color tokens
• Development workflows
• CI/CD pipeline
• Figma plugin

Quick Start

pnpm install
pnpm dev                    # Start docs site at localhost:4321
pnpm --filter @cloudflare/kumo test

Figma Plugin

# Optional: enable token sync during build
# cp packages/kumo-figma/scripts/.env.example packages/kumo-figma/scripts/.env
# $EDITOR packages/kumo-figma/scripts/.env  # set FIGMA_TOKEN (and optionally FIGMA_FILE_KEY)

pnpm --filter @cloudflare/kumo-figma build
# In Figma: Plugins > Development > Import plugin from manifest...
# Select: packages/kumo-figma/src/manifest.json

Creating Components

pnpm --filter @cloudflare/kumo new-component

Documentation

• Live Docs: kumo-ui.com
• AI/Agent Guide: AGENTS.md

License

MIT