# @clay-design-system/react 中文文档

规范地址：https://npmcn.com/package/%40clay-design-system/react/

版本：0\.24\.0
npm 元数据更新时间：2026-11-09T17:31:13.815Z
中文译文更新时间：2026-11-10T00:33:45.748Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40clay-design-system/react
原文对照：https://npmcn.com/package/%40clay-design-system/react/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.8 MB，3133 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：^20\.19\.0 \|\| \>=22\.12\.0
- 运行依赖：4 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-10-13T06:46:55.422Z
- 最新版本发布：2026-11-09T17:31:13.619Z
- 近 30 天下载量：3084（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 19 个）

## 中文简介

重放19节+原子组件为周一.com营销页面,外加资产注册和静态导出所使用的服务器-发送/递增层. Styling 是 CSS 模块在 `@layer clay.components`,消耗 clay 设计- syste

## 安装

```sh
npm install @clay-design-system/react
```

也可以使用：`pnpm add @clay-design-system/react`、`yarn add @clay-design-system/react`、`bun add @clay-design-system/react`

## README

# @ clay- design- system/ react

反应19节+原子组件为周一.com营销页面,外加资产登记册和 静态导出所使用的服务器- 递增 / 递增层 。 Styling 是 CSS 模块在 `@layer clay.components`消费 `@clay-design-system/tokens` 只有这个.

## 入境点

| 导入 | 什麽 |
| --- | --- |
| `@clay-design-system/react` | 每节+原子(精确道具: `skills/web-design-brain/reference/COMPONENT_PROPS.md`, (中文(简体) ), `FOOTER_DEFAULTS`资产常数`G2_BADGES`(中文(简体) ). 每个模块输出的薄管: 捆绑机只保留所导入的 |
| `@clay-design-system/react/sections/<Name>` • 妇女 `…/components/<Name>` | 单方一个区块/组件(两个地图都到 `dist/web/<Name>`),例如. `…/sections/FeaturesSection`, (中文(简体) ), `…/components/Button` |
| `@clay-design-system/react/styles.css` | 构成部分CSS+ `clay-reveal` 编号 : `clay-stagger` 滚动工具( 每个组件一个样式表) |
| `@clay-design-system/react/assets` | 资产解析器: `iconUrl`, (中文(简体) ), `logoUrl`, (中文(简体) ), `agentUrl`, (中文(简体) ), `badgeUrl`, (中文(简体) ), `imageUrl`, (中文(简体) ), `configureAssets` (CDN URL;见 [CDN 资产](https://npmcn.com/package/%40clay-design-system/react/src/assets/README.md)(中文(简体) ) |
| `@clay-design-system/react/logos` | `logoUrl`, (中文(简体) ), `logoKeys`, (中文(简体) ), `customerSvgMap`, (中文(简体) ), `integrationSvgMap`, (中文(简体) ), `productSvgByProduct` (+ 数) `@clay-design-system/react/logos/manifest.json`,键 ~ CDN URL) |
| `@clay-design-system/react/icons` | `iconSvgMap`, (中文(简体) ), `iconMetadata`, (中文(简体) ), `ICON_NAMES` (所有~600图标) |
| `@clay-design-system/react/icon-svg` • 妇女 `…/icons/data/<name>` | `IconSvg` (将 SVG 标记给您通过) 和一个图标的标记作为字符串: 精益的替代 `<Icon name>`,可以装入每个图标 |
| `@clay-design-system/react/badges` | `badgeUrl`, (中文(简体) ), `badgeKeys` |
| `@clay-design-system/react/render` | 服务器渲染一个页面规格( 由 `apps/pages/scripts/build-static.js`(中文(简体) ) |
| `@clay-design-system/react/page-spec` | `PageSpec` 类型 + 区域计划 |
| `@clay-design-system/react/brief-conformance` | `evaluateBriefConformance` - 对照其简报检查网页计划 |
| `@clay-design-system/react/enhance` | 无框架 `enhance.js` (塔布、滑轮、手风琴等)用静态页面发运 |
| `@clay-design-system/react/bundles/*` | 节捆绑( C)`dist/bundles/`: 一个犬科部分的静态 HTML, CSS块, 符号,字体和 `init(root)` 带有表单(每个文件的sha256)的脚本,可以插入现有的HTML页面而无需回放. 索引 : `@clay-design-system/react/bundles/index.json`; 飞行员 : `FaqSection` |
| `@clay-design-system/react/catalog.json` | 区/变量目录(Zod schemas的变量) |
| `@clay-design-system/react/page-spec.schema.json` • 妇女 `…/page-spec.example.json` | PageSpec 以 JSON Schema 为名( 2020- 12 草案, 由 zod schema 生成) `renderPageSpec` parases)和一个通过它的光谱:用任何JSON Schema验证器验证光谱,不需要MCP. 未知道具,布局-内容相接和"硬通则"C6/A11不在计划; 3; `clay_validate_page` 检查他们 |

每艘次路径船舶`.js`)和CJS(`.cjs`与匹配 `.d.ts` 编号 : `.d.cts`。图像从不出现在软件包中:图标、标志和 代理艺术和信任/遵从徽章来自Clay CDN通过 `src/assets` (品牌文件夹是一个设置). 子路径 a 区域中不属于此区域本身的文件夹( x)`…/sections/<Name>/assets`未导出.

**节点 :** `^20.19.0 || >=22.12.0`。 。 。 . `require()` 软件包需求 `require(esm)` (Swiper是只使用无害环境管理),节点从20.19起未加标记 和22.12;见 [移民.md](https://npmcn.com/package/%40clay-design-system/react/MIGRATION.md) 第1节.

## 来源布局( E)`src/`(中文(简体) )

`assets/` (CDN资产解析器)- `web/` 每个组件一个文件夹( o)`<Name>.tsx`, (中文(简体) ), `.module.css`, (中文(简体) ), `.stories.tsx`, (中文(简体) ), `.test.tsx`, (中文(简体) ), `index.ts`· `logos/` • 妇女 `icons/` • 妇女 `visuals/agents/` (单位:千美元)`<AgentVisual>`· `badges/` • 妇女 `ssr/` + 键 `enhance/` · (静态出口) `page-spec/` • 妇女 `brief-conformance/` • 妇女 `handbook/` + 键 `wiki/` (产生) - 公司特工 `src/figma/connections.json` (图框登记)- `docs/` · (故事手册) `index.ts` (炮声).

## 脚本

```bash
pnpm --filter @clay-design-system/react build      # per-module library (ESM+CJS+types) + enhance bundle + catalog.json
pnpm --filter @clay-design-system/react test       # Vitest + Testing Library + axe
pnpm --filter @clay-design-system/react assets:index # regenerate src/assets/generated from cdn-manifest.json
pnpm --filter @clay-design-system/react lint       # stylelint — clay-ds/no-foundation-tokens only
pnpm --filter @clay-design-system/react typecheck
```

添加组件 : `pnpm generate <Name>` 和根中的核对表 [`CLAUDE.md`](https://npmcn.com/package/CLAUDE.md) ("增加一新组成部分"). 用法文件 : `skills/web-design-brain/reference/SECTIONS.md`。 。 。 .

## 常见问题

### @clay-design-system/react 是什么？

重放19节\+原子组件为周一\.com营销页面,外加资产注册和静态导出所使用的服务器-发送/递增层\. Styling 是 CSS 模块在 @layer clay\.components,消耗 clay 设计- syste

### 如何安装 @clay-design-system/react？

在项目目录运行 npm install @clay-design-system/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @clay-design-system/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @clay-design-system/react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @clay-design-system/react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.19\.0 \|\| \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @clay-design-system/react 可以商用吗？

@clay-design-system/react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @clay-design-system/react 的下载量有多少？

根据 npm 官方下载统计，@clay-design-system/react 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,084 次，日均约 103 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @clay-design-system/react 还在维护吗？

最新版本 0\.24\.0 发布于 2026/11/10（今天）；至今共发布 19 个版本，其中过去 12 个月发布了 19 个；首次发布于 2026/10/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。