The Problem

Teams building design-system-driven React applications face a recurring problem: accessible UI components are hard to build correctly, and design tokens drift between Figma and code. Kumo solves this by providing a production component library built on Base UI, with a Figma plugin that generates code from design files, and a CI pipeline that keeps docs, tokens, and components in sync.

What This Does

Kumo is a portfolio of four self-contained projects under one monorepo. The core packages/kumo is a React component library (buttons, dialogs, sidebars, charts) built on Base UI with Tailwind styling and semantic color tokens. It handles keyboard navigation, focus management, and ARIA attributes so consumer teams don't have to.

The other projects are packages/kumo-figma (a Figma plugin that converts design tokens to Tailwind config and generates component code), packages/kumo-docs-astro (an Astro-based docs site), and packages/kumo-screenshot-worker (a Cloudflare Worker for visual regression screenshots). The ci/ directory contains scripts for release management, visual regression, and PR reporting.

How It Is Wired

The monorepo uses pnpm workspaces with GitHub Actions for CI. The import graph shows 504 internal modules with 722 edges. The most-connected modules are packages/kumo/src/utils/cn (56 dependents, 0 imports — a stable utility) and packages/kumo-figma/src/generators/shared (44 dependents). The packages/kumo/src/index module imports 49 modules and is the library's public entry point.

The import cycle lives in packages/kumo/src/components/banner/banner.tsx and banner-action.tsx — two modules that mutually reference each other. This is a high-blast-radius change point. The cn utility is the hub: 56 modules depend on it, so any change there ripples across the entire library.

The Figma plugin's shared.ts generator is another hub (44 dependents) and is also flagged as oversized at 1,048 lines. The tailwind-to-figma parser (32 dependents) is the bridge between design tokens and code.

How To Use It

Setup (from README):

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

Install the library:

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

Usage:

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

CLI:

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

The Figma plugin requires a FIGMA_TOKEN (optionally FIGMA_FILE_KEY) set in packages/kumo-figma/scripts/.env.

Real-World Use

A design team maintains a Figma file with brand tokens. The Kumo Figma plugin syncs those tokens into Tailwind config, generates component code, and the CI pipeline publishes the package to npm. A consumer team installs @cloudflare/kumo, imports components with tree-shaking (import { Button } from "@cloudflare/kumo/components/button"), and gets accessible, design-compliant UI without writing ARIA attributes.

Code Health & Issues

Static analysis found 61 findings (16 high, 45 medium) across 6 kinds. Key items:

  • High - Oversized files (23 instances): packages/kumo-figma/src/generators/shared.ts (1,048 lines), packages/kumo/src/components/sidebar/sidebar.tsx, packages/kumo/src/components/chart/Maps.tsx. These need splitting by responsibility.
  • High - Hub modules (8 instances): packages/kumo/src/utils/cn.ts (56 dependents), packages/kumo-figma/src/generators/shared.ts, packages/kumo-figma/src/logger.ts. High churn risk; keep stable.
  • High - Import cycle (2 instances): banner.tsx and banner-action.tsx participate in a circular import.
  • High - Deep nesting (12 instances): max indentation depth of 6 in banner.tsx, date-range-picker.tsx, CommandPaletteDemo.tsx.
  • High - Duplicated code: 2075 repeated 6-line blocks across 176 files, mostly in ci/versioning/*.sh.

Security audit findings:

  • Critical - Secrets in fork-triggerable workflow: .github/workflows/preview-deploy.yml exposes CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID, SCREENSHOT_API_KEY to contributor-controlled input. Move secret-using steps to a workflow_run job.
  • Medium - No Dependabot/Renovate: 5 manifests, no update bot.
  • Medium - No dependency vulnerability scan in CI.
  • Medium - persist-credentials: false missing on checkout in preview-deploy.yml.
  • Low - No job timeouts in bonk-check.yml.
  • Low - Missing convention files: no .editorconfig, .gitattributes, or formatter config.

The Bottom Line

Kumo is a serious, production-grade design system with real CI/CD, tests (114 test files), and a thoughtful Figma-to-code pipeline. The core library is well-architected for tree-shaking and accessibility. The main risks are the oversized hub modules, the import cycle in the banner component, and the critical workflow security issue — fix that before forking. Suitable for teams that need a Cloudflare-grade design system or want to study how a mature component library handles token sync and release automation.