Components

Kumo is Cloudflare's React component library, built on Base UI and Tailwind CSS. Edge Kit uses it for controls, forms, overlays, navigation, and other common interface patterns.

The components give you consistent behavior and styling to build on. Your product's layouts and feature views remain ordinary React components that you can change freely.

Component library

Use Kumo's existing controls before building a custom version. Buttons, inputs, dialogs, tables, and other components expose variants for common sizes and states.

The installed CLI provides the documentation for your checkout:

pnpm exec kumo ls
pnpm exec kumo doc Button

You can also browse the component reference.

Usage

Import the component you need through its subpath, keeping imports focused:

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

import { m } from "@/lib/i18n/messages.js";

export function SaveButton() {
  return <Button variant="primary">{m.save()}</Button>;
}

Use component props for supported variants and states, then Tailwind classes for layout. Shared colors and fonts belong in your styling configuration.

Shared views

Keep reusable application components in the shared UI area and feature-specific components with their feature. A common confirmation dialog belongs in shared UI; a subscription settings view belongs with billing.

Compose existing controls into forms and screens so keyboard behavior, labels, and loading states stay consistent. When wrapping a component, preserve its accessibility props and event handling.

Custom components

You can introduce your own React components or another compatible library. Check accessibility, server rendering, React support, and the effect on your Worker bundle before adopting it.

Review keyboard navigation, focus, loading and error states, narrow screens, and both color modes. The browser tests provide a place to cover the complete interaction.