参考手册Workspace 包参考
UI 组件库
shadcn/ui 组件库,提供 80+ 个预制 UI 组件
这是什么
@01mvp/ui 是 shadcn/ui 组件在本项目中的存放位置。它包含了 80+ 个预制 UI 组件,涵盖了按钮、输入框、对话框、表格等常见界面元素。
shadcn/ui 是一个基于 Radix UI(处理无障碍交互)+ Tailwind CSS(处理样式)的组件集合。和传统的 npm 包不同,shadcn 的组件源码直接放在你的项目里,可以按需修改。
能做什么
提供 UI 组件包括但不限于:
- 基础:Button(按钮)、Input(输入框)、Label(标签)、Textarea(多行文本)
- 布局:Card(卡片)、Dialog(弹窗)、Sheet(侧边栏)、Drawer(抽屉)
- 导航:Breadcrumb(面包屑)、Pagination(分页)、Tabs(标签页)
- 数据:Table(表格)、Chart(图表)、Form(表单)
- 反馈:Skeleton(加载骨架)、Toast(轻提示)、Progress(进度条)
不要手动编辑 packages/ui/ 里的组件文件!这个包是只读的 shadcn/ui 组件库。手动修改会导致升级时冲突,且影响所有引用此包的应用。
重要规则
- ✅ 用
pnpm dlx shadcn@latest add <组件名>添加新组件 - ❌ 不要手动编辑
packages/ui/里的组件文件 - ✅ 要自定义样式 → 在应用的
src/components/里写覆盖