cloudflare/kumo
Publicmirrored from https://github.com/cloudflare/kumoAvailable
README.md
95lines · modecode
| 1 | # Kumo |
| 2 | |
| 3 | Cloudflare's component library for building modern web applications. |
| 4 | |
| 5 | Kumo provides accessible, design-system-compliant UI components built on [Base UI](https://base-ui.com/). It handles keyboard navigation, focus management, and ARIA attributes so you can build accessible applications without thinking through every detail. |
| 6 | |
| 7 | <img width="2560" height="1456" alt="image" src="https://github.com/user-attachments/assets/032f5a0e-b686-4440-b1ca-6182379479aa" /> |
| 8 | |
| 9 | ## Installation |
| 10 | |
| 11 | ```bash |
| 12 | pnpm add @cloudflare/kumo |
| 13 | ``` |
| 14 | |
| 15 | ### Peer Dependencies |
| 16 | |
| 17 | ```bash |
| 18 | pnpm add react react-dom @phosphor-icons/react |
| 19 | ``` |
| 20 | |
| 21 | ## Usage |
| 22 | |
| 23 | ```tsx |
| 24 | import { Button, Input, Dialog } from "@cloudflare/kumo"; |
| 25 | import "@cloudflare/kumo/styles"; |
| 26 | ``` |
| 27 | |
| 28 | ### Granular Imports (Tree-Shaking) |
| 29 | |
| 30 | ```tsx |
| 31 | import { Button } from "@cloudflare/kumo/components/button"; |
| 32 | ``` |
| 33 | |
| 34 | ### Base UI Primitives |
| 35 | |
| 36 | Kumo re-exports all Base UI primitives for advanced use cases: |
| 37 | |
| 38 | ```tsx |
| 39 | import { Popover } from "@cloudflare/kumo/primitives/popover"; |
| 40 | ``` |
| 41 | |
| 42 | ## CLI |
| 43 | |
| 44 | Query component documentation from the command line: |
| 45 | |
| 46 | ```bash |
| 47 | npx @cloudflare/kumo ls # List all components |
| 48 | npx @cloudflare/kumo doc Button # Get component docs |
| 49 | npx @cloudflare/kumo docs # Get all docs |
| 50 | ``` |
| 51 | |
| 52 | ## Development |
| 53 | |
| 54 | See [AGENTS.md](./AGENTS.md) for comprehensive development documentation including: |
| 55 | |
| 56 | - Component patterns and styling system |
| 57 | - Semantic color tokens |
| 58 | - Development workflows |
| 59 | - CI/CD pipeline |
| 60 | - Figma plugin |
| 61 | |
| 62 | ### Quick Start |
| 63 | |
| 64 | ```bash |
| 65 | pnpm install |
| 66 | pnpm dev # Start docs site at localhost:4321 |
| 67 | pnpm --filter @cloudflare/kumo test |
| 68 | ``` |
| 69 | |
| 70 | ### Figma Plugin |
| 71 | |
| 72 | ```bash |
| 73 | # Optional: enable token sync during build |
| 74 | # cp packages/kumo-figma/scripts/.env.example packages/kumo-figma/scripts/.env |
| 75 | # $EDITOR packages/kumo-figma/scripts/.env # set FIGMA_TOKEN (and optionally FIGMA_FILE_KEY) |
| 76 | |
| 77 | pnpm --filter @cloudflare/kumo-figma build |
| 78 | # In Figma: Plugins > Development > Import plugin from manifest... |
| 79 | # Select: packages/kumo-figma/src/manifest.json |
| 80 | ``` |
| 81 | |
| 82 | ### Creating Components |
| 83 | |
| 84 | ```bash |
| 85 | pnpm --filter @cloudflare/kumo new-component |
| 86 | ``` |
| 87 | |
| 88 | ## Documentation |
| 89 | |
| 90 | - **Live Docs**: [kumo-ui.com](https://kumo-ui.com) |
| 91 | - **AI/Agent Guide**: [AGENTS.md](./AGENTS.md) |
| 92 | |
| 93 | ## License |
| 94 | |
| 95 | MIT |
| 96 | |