安装
一次安装整个 JoyUI 组件库，引入主题后即可 import 使用。
整库安装（推荐）
pnpm add @joyui/react react-aria-components @remixicon/react
# 或 npm / yarn 等价命令按需再装可选 peer（图表、表格、编辑器等）：
pnpm add recharts @tanstack/react-table @tanstack/react-virtual motion dayjs在全局样式中引入 Tailwind 与 JoyUI token：
@import "tailwindcss";
@import "@joyui/react/styles.css";组件可直接从包导入，不必再逐个 add：
import { Button, DataTable, RevenueChartCard, AdminDashboard } from "@joyui/react";
export function Page() {
return (
<>
<Button variant="primary">保存</Button>
<RevenueChartCard />
<AdminDashboard />
</>
);
}设计约定
- 语义 token：
text-text-primary、bg-background-primary-default、border-border-default - 字阶：
text-title-2-medium、text-body-1-regular（不要拆成text-sm font-medium） - 合并 class：
cx()/cn()（来自@joyui/react） - 图标：
@remixicon/react传组件引用，不是<Icon /> - 深色：
.dark翻转 token，禁止手写dark:调色板
可选：拷贝源码到本地
若需要把组件源码写进项目再改，仍可用 CLI：
npx @joyui/cli@latest init
npx @joyui/cli add button data-table --yes整库使用优先 pnpm add @joyui/react。