参考手册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/ 里写覆盖

相关链接