ChuFix UI（中文名 础件）是一套同源的 Vue 3 / React 组件库：
- 120+ 基础原子（Button / Input / Modal / DataGrid / Toast …）
- 20+ 数据可视化图表（LineChart / DonutChart / Treemap / LatencyHeatmap …）
- 25+ 页面级 Blocks（Dashboard / Login / SettingsPage / DBWorkbench …）
- OKLCH 设计 token + 三套主题（dark-cool / dark-warm / light）+ 两种密度
- CSS 类前缀
cf-*，组件前缀Cf*，与其他库零冲突 - 纯 HTML / JS 项目也能直接用 CSS 类名
设计 token 与组件 CSS 同源，理论上你只引 @chufix-design/tokens 一个包，配合 BEM 类名也能在原生 HTML 里跑通。
# Vue 3
pnpm add @chufix-design/vue @chufix-design/tokens
# React 18+
pnpm add @chufix-design/react @chufix-design/tokens// main.ts
import '@chufix-design/tokens/tokens.css';
import '@chufix-design/vue/style.css';<script setup lang="ts">
import { CfButton, CfCard, CfInput } from '@chufix-design/vue';
</script>
<template>
<CfCard>
<h3>登录</h3>
<CfInput placeholder="邮箱" />
<CfButton variant="primary" block>继续</CfButton>
</CfCard>
</template>// main.tsx
import '@chufix-design/tokens/tokens.css';
import '@chufix-design/react/style.css';import { CfButton, CfCard, CfInput } from '@chufix-design/react';
export function Login() {
return (
<CfCard>
<h3>登录</h3>
<CfInput placeholder="邮箱" />
<CfButton variant="primary" block>继续</CfButton>
</CfCard>
);
}在你的根元素（通常是 <html> 或 <body>）切两个 attribute：
<html data-theme="dark-cool" data-density="comfortable">data-theme：dark-cool（默认） /dark-warm/lightdata-density：comfortable（控件 32px，默认） /compact（控件 28px）
主题与密度正交，可以任意组合。
# 列出所有可用 blocks
npx @chufix-design/cli list
# 把整套登录页拉到 ./src/blocks/login-basic/
npx @chufix-design/cli add login-basic
# 自定义目录
npx @chufix-design/cli add billing-page --out ./components/billingblock 源码会同时落 Vue 和 React 两份，你想用哪个保留哪个。
| 包 | 作用 |
|---|---|
@chufix-design/tokens |
设计 token —— OKLCH CSS 变量 + 可选 Tailwind preset |
@chufix-design/icons |
16x16 SVG sprite + 类型化图标名 |
@chufix-design/vue |
Vue 3 组件包 |
@chufix-design/react |
React 18+ 组件包 |
@chufix-design/cli |
chufix add <id> —— 拷贝 block 源码 |
需要 Node 18+ 和 pnpm 9+。
git clone https://github.com/chenqi92/chufix.git
cd chufix
pnpm install
# 一键启动：先打包再开文档站
pnpm build:packages
pnpm dev:docs
# → 访问 http://localhost:4321监听模式联调：
pnpm dev:vue # 终端 1：Vue 包 watch 模式
pnpm dev:react # 终端 2：React 包 watch 模式
pnpm dev:docs # 终端 3：文档站chufix/
├── packages/
│ ├── tokens/ @chufix-design/tokens
│ ├── icons/ @chufix-design/icons
│ ├── vue/ @chufix-design/vue
│ ├── react/ @chufix-design/react
│ └── cli/ @chufix-design/cli
├── apps/
│ └── docs/ Astro 文档站（源码同源跑 Vue + React 实例）
├── examples/
│ └── vite-vue/ 最小 Vite + Vue 烟囱测试
└── scripts/ 构建 / 同步 / 检查脚本
本仓库使用 changesets + GitHub Actions 自动发版：
- 改完代码后，
pnpm changeset选包、选 patch/minor/major、写一句话说明 - 把
.changeset/*.md草稿一起 commit & push - GitHub Actions 自动开 "Version Packages" PR
- Merge 那个 PR，自动 publish 到 npm，并产生 GitHub Release
MIT © chenqi92