GUIDE
开始使用
从现有源码 workspace 开始，构建组件、引入样式并配置 CwaProvider。
Alpha 源码渠道
当前页面是 0.1.0-alpha.4 的源码候选。该版本尚未发布到 npm，请使用提供的源码 workspace。公开 GitHub 仓库可读，但本地候选可能包含尚未推送的修改。
1. 构建现有 workspace
在 CWA Design 源码根目录执行。沿用项目的 Node LTS 与 packageManager 字段，不需要重新创建工程。
corepack pnpm install --frozen-lockfile
corepack pnpm --filter @cwa-design/tokens run build
corepack pnpm --filter @cwa-design/react run build
corepack pnpm --filter @cwa-design/examples-react-vite run build仓库内已有 examples/react-vite 消费工程，可用来检查入口、CSS 和构建。
2. 使用 workspace 依赖
对于同一 pnpm workspace 内的 React 应用，声明组件库依赖并保留 React 19 的实际版本。
{
"dependencies": {
"@cwa-design/react": "workspace:*",
"react": "19.3.0",
"react-dom": "19.3.0"
}
}独立工程可使用本地打包并验证的 tarball。下载后在已有 React 19 工程中安装文件。
corepack pnpm add ./cwa-design-react-0.1.0-alpha.4.tgz3. 写一个可交互页面
样式入口引入一次，Provider 负责主题与偏好，业务持有表单状态。
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { Button, CwaProvider, Field, Input, Stack } from "@cwa-design/react";
import "@cwa-design/react/styles.css";
function App() {
const [name, setName] = useState("");
const [saved, setSaved] = useState(false);
return (
<CwaProvider theme="system" material="auto" motion="system">
<form onSubmit={(event) => { event.preventDefault(); setSaved(true); }}>
<Stack gap={4}>
<Field label="显示名称" description="用于工作区中的个人资料">
<Input value={name} onChange={(event) => { setName(event.target.value); setSaved(false); }} />
</Field>
<Button type="submit">保存设置</Button>
<p role="status">{saved ? "已保存：" + name : ""}</p>
</Stack>
</form>
</CwaProvider>
);
}
const root = document.getElementById("root");
if (root) createRoot(root).render(<App />);