DOCSEARCHbyAlgolia
Submit Docs

Kumo Design System

repository·main·Indexed 25 days ago

https://github.com/cloudflare/kumo

Cloudflare's design system and component library providing accessible, design-system-compliant UI components built on Base UI. It includes a CLI for component documentation and scaffolding, support for Tailwind CSS and standalone styles, and a collection of customizable blocks like PageHeader and DeleteResource.

Tokens
67.9K
Snippets
189
Records
504
Agent score
84%

What's inside Kumo

  1. Access the Kumo Component Registry

    main
    The Kumo component registry is a machine-readable JSON file containing metadata for all Kumo components, including props, variants, examples, and semantic tokens. It is designed for use by AI agents, code generation tools, and other automated workflows. You can access this registry via the CLI, a remote HTTP API, or by reading the local JSON file directly.

  3. Complete Kumo component update workflow

    main

    When you modify Kumo components in code, follow this sequence to ensure Figma stays in sync:

    1. Edit components: Modify files in packages/kumo/src/components/....
    2. Regenerate registry: Run the codegen command to update the component registry.
    3. Sync tokens: If colors changed, run the Figma token sync.
    4. Build plugin: Rebuild the Figma plugin.
    5. Run in Figma: Execute the plugin via the Figma Desktop menu.
    # 1. Make changes to Kumo components
# ...edit packages/kumo/src/components/...

# 2. Regenerate component registry
pnpm --filter @cloudflare/kumo codegen:registry

# 3. Sync tokens to Figma (if colors changed)
pnpm --filter @cloudflare/kumo-figma figma:sync

# 4. Build the plugin
pnpm --filter @cloudflare/kumo-figma build

# 5. Run in Figma: Plugins > Development > Kumo UI Kit Generator

  4. Install the PageHeader block

    main

    PageHeader is a block—a component installed via the CLI that is copied directly into your project, allowing for full customization.

    Follow these steps to install it:

    1. Initialize Kumo config (if not already done):
      npx @cloudflare/kumo init
    2. Install the block:
      npx @cloudflare/kumo add PageHeader
    3. Import the component from your local directory. The path depends on your kumo.json blocksDir setting (the default is src/components/kumo/).
    // The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { PageHeader } from "./components/kumo/page-header/page-header";

  7. Apply themes with data-theme

    main

    Themes override semantic token values while preserving token names. Apply a theme by setting the data-theme attribute on a parent element.

    Available themes include:

    • kumo (Default)
    • fedramp (Government compliance styling)

    Themes work in conjunction with data-mode:

    <div data-theme="fedramp">
  <Button>FedRAMP Styled</Button>
</div>

// Full app example
<html data-mode="dark" data-theme="fedramp">
    <div data-theme="fedramp">
  <Button>FedRAMP Styled</Button>
</div>

<html data-mode="dark" data-theme="fedramp">

  9. Migrate from legacy Code/CodeBlock components

    main

    The legacy Code and CodeBlock components from @cloudflare/kumo are deprecated and will be removed in v2.0. Migrate to CodeHighlighted and ShikiProvider from @cloudflare/kumo/code.

    // Before (deprecated)
import { Code, CodeBlock } from "@cloudflare/kumo";
<CodeBlock code="const x = 1;" lang="ts" />

// After
import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";

// Once at app root
<ShikiProvider engine="javascript" languages={["tsx"]}>
  <App />
</ShikiProvider>

// In components
<CodeHighlighted code="const x = 1;" lang="tsx" />