Vibe Vibe

主题

5.2 组件库 ​

本节目标：了解主流组件库的特点和适用场景，学会根据项目需求选择合适的组件库。

组件库是预先做好的"乐高积木"。你不需要每次都手写按钮、输入框、对话框，直接拿现成的来用。老师傅说："选对组件库，能省掉 80% 的 UI 工作。"

shadcn/ui（推荐） ​

shadcn/ui

image-20260222210620318

序言里已经介绍过，这里展开说说为什么它是 VibeCoding 的首选。

核心理念：不是 npm 包，而是把组件源代码直接复制到你的项目里。你拥有完全控制权。

image-20260222210651904

为什么适合 AI 开发：

普通组件库装完后代码藏在 node_modules 深处，AI 看不到也改不了；shadcn/ui 把代码直接放进你的项目文件夹，AI 可以像改你自己写的代码一样修改它。

  • 代码在你项目里，AI 可以直接读取和修改
  • 组件质量高，无障碍支持好——比如视障用户用屏幕朗读器也能正常操作按钮和表单
  • 生态丰富，有大量扩展组件和模板

让 AI 用好 shadcn/ui：

告诉 AI 你项目需要使用 shadcn/ui，它就会优先使用这些组件。

image-20260222210713180

shadcn/ui 生态扩展：

shadcn/ui 的生态在持续壮大，社区贡献了很多高质量的扩展：

扩展库用途
Magic UI动画组件、特效组件
Aceternity高级 UI 特效组件

其他主流组件库 ​

Ant DesignReact
阿里出品的企业级组件库，60+ 组件覆盖几乎所有场景，中文文档最完善。
后台管理企业内部工具数据密集型
Element PlusVue 3
饿了么团队出品，Vue 3 生态最主流的组件库。用 Vue 做后台，这基本是默认选择。
Vue 首选后台管理中文文档
TDesign多框架
腾讯出品，同时支持 React、Vue 2/3、小程序。设计规范完整，提供 Figma 资源。
React/Vue/小程序设计体系
Arco DesignReact / Vue
字节跳动出品，60+ 组件经过大规模验证，内置图标库和风格配置平台。
数据密集型主题定制
Material Design 3Google 官方
Google 官方设计规范（目前已更新到第 3 版），定义了颜色、排版、组件等标准。非组件库，而是设计语言本身。
设计规范跨平台Dynamic Color
MUI (Material UI)React
基于 Google Material Design 规范的第三方 React 组件库，全球使用最广泛，主题定制能力强。
Material Design国际化
Radix UIReact
无样式底层组件库，只管行为和无障碍，样式完全你说了算。shadcn/ui 的底层。
零样式无障碍完全定制
HeroUIReact
原名 NextUI，基于 Tailwind CSS，开箱即用就好看，内置动画效果。
Tailwind CSS开箱即用现代感

组件库选择决策树 ​

你的项目是什么类型？

让 AI 帮你用组件库 ​

不管选了哪个组件库，关键是在提示词里明确告诉 AI 你用的是哪个：

"用 shadcn/ui 的 Table 组件展示用户列表，支持排序和分页"

"用 Ant Design 做一个订单管理表格，支持筛选和导出"

下一步

组件库解决了静态界面的问题。想让页面"动"起来？继续看 5.3 动画与交互库。