cloudflare/kumo

# Kumo Cloudflare 用于构建现代 Web 应用程序的组件库。 Kumo 提供了基于 [Base UI](https://base-ui.com/) 构建的、无障碍且符合设计系统规范的 UI 组件。它负责处理键盘导航、焦点管理和 ARIA 属性，让你无需深思熟虑每个细节即可构建无障碍应用程序。 ## 安装 ``` pnpm add @cloudflare/kumo ``` ### Peer Dependencies ``` pnpm add react react-dom @phosphor-icons/react ``` ## 用法 ``` import { Button, Input, Dialog } from "@cloudflare/kumo"; import "@cloudflare/kumo/styles"; ``` ### 细粒度导入 (Tree-Shaking) ``` import { Button } from "@cloudflare/kumo/components/button"; ``` ### Base UI Primitives Kumo 重新导出了所有 Base UI 原语，以用于高级用例： ``` import { Popover } from "@cloudflare/kumo/primitives/popover"; ``` ## CLI 从命令行查询组件文档： ``` npx @cloudflare/kumo ls # List all components npx @cloudflare/kumo doc Button # Get component docs npx @cloudflare/kumo docs # Get all docs ``` ## 开发 请参阅 [AGENTS.md](./AGENTS.md) 获取全面的开发文档，包括： - 组件模式和样式系统 - 语义化颜色 token - 开发工作流 - CI/CD pipeline - Figma 插件 ### 快速开始 ``` pnpm install pnpm dev # Start docs site at localhost:4321 pnpm --filter @cloudflare/kumo test ``` ### Figma 插件 ``` # 可选：在 build 期间启用 token 同步 # cp packages/kumo-figma/scripts/.env.example packages/kumo-figma/scripts/.env # $EDITOR packages/kumo-figma/scripts/.env # 设置 FIGMA_TOKEN（以及可选的 FIGMA_FILE_KEY） pnpm --filter @cloudflare/kumo-figma build # 在 Figma 中：Plugins > Development > Import plugin from manifest... # 选择：packages/kumo-figma/src/manifest.json ``` ### 创建组件 ``` pnpm --filter @cloudflare/kumo new-component ``` ## 文档 - **在线文档**: [kumo-ui.com](https://kumo-ui.com) - **AI/Agent 指南**: [AGENTS.md](./AGENTS.md) ## License MIT

标签：Cloudflare, MITRE ATT&CK, React, Syscalls, UI组件库, 无障碍设计, 自动化攻击, 设计系统