如何向 @iflux/ui 添加新的 shadcn/ui 组件
本指南介绍如何向 @iflux/ui 包添加新的 shadcn/ui 组件。
项目使用 shadcn (base-rhea 预设,底层 @base-ui/react),使用以下命令添加组件:
组件会被自动放置到 packages/ui/src/components/ 目录中。
如果需要手动添加组件:
在 packages/ui/src/ui/ 下创建新文件,例如 card.tsx:
"use client" 指令data-slot 属性标识组件插槽cn() 合并 className在 packages/ui/package.json 的 exports 中添加新组件(./ui/* 通配模式已覆盖时无需单独添加):
项目使用 CSS 变量定义圆角层级:
组件应保持一致:
rounded-4xl(项目自定义)rounded-xl 或 rounded-2xl使用 CSS 自定义属性,不要硬编码颜色:
所有颜色 token 都支持暗色模式。使用标准 token 即可,无需额外处理。
使用 class-variance-authority 定义组件变体:
使用 React.Context 在子组件间共享状态:
项目使用 @base-ui/react 作为底层组件库(shadcn base-rhea 预设)。添加新组件时优先使用 Base UI 的实现:
唯一例外:Drawer 基于 vaul(底层是 Radix UI Dialog),使用 asChild 模式。