楚河 UI (chuhe-ui)

基于 shadcn-vue 构建的企业级 Vue 3 组件库。

命名由来

"楚河"取自中国象棋棋盘中间的分界线，寓意组件库是连接设计与开发的桥梁。

特性

• 完全可控 - 组件代码直接在项目中，可随意修改
• Reka UI 底层 - 基于 Reka UI（原 Radix Vue）无头组件
• Tailwind CSS v4 - 使用最新的 Tailwind CSS 进行样式定制
• TypeScript - 完整的类型支持

技术栈

| 类别 | 技术 | |------|------| | 框架 | Vue 3 | | 无头组件 | Reka UI | | 样式 | Tailwind CSS v4 | | 构建 | Vite | | 文档 | Storybook 10 |

快速开始

# 安装依赖
pnpm install

# 启动 Storybook 文档
pnpm storybook

# 构建 Storybook
pnpm build-storybook

项目结构

chuhe-ui/
├── .storybook/           # Storybook 配置
├── registry/
│   └── chuhe/            # 组件源码
│       └── button/       # Button 组件
├── src/
│   ├── lib/
│   │   └── utils.ts      # 工具函数
│   └── styles/
│       └── globals.css   # 全局样式
└── docs/                 # 补充文档

组件列表

| 组件 | 状态 | |------|------| | Button | ✅ 已完成 |

在其他项目中使用

方式一：通过 shadcn-vue CLI

npx shadcn-vue add https://your-server.com/r/button.json

方式二：手动复制

直接复制 registry/chuhe/ 下的组件代码到你的项目中。

开发

# 代码检查
pnpm lint

# 类型检查
pnpm type-check

License

MIT