来源：https://github.com/datawhalechina/vibe-vibe

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

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

shadcn/ui（推荐）

shadcn/ui

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

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

为什么适合 AI 开发：

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

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

让 AI 用好 shadcn/ui：

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

shadcn/ui 生态扩展：

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

其他主流组件库

Ant Design React

阿里出品的企业级组件库，60+ 组件覆盖几乎所有场景，中文文档最完善。

后台管理 企业内部工具 数据密集型

Element Plus Vue 3

饿了么团队出品，Vue 3 生态最主流的组件库。用 Vue 做后台，这基本是默认选择。

Vue 首选 后台管理 中文文档

TDesign 多框架

腾讯出品，同时支持 React、Vue 2/3、小程序。设计规范完整，提供 Figma 资源。

React/Vue/小程序 设计体系

Arco Design React / Vue

字节跳动出品，60+ 组件经过大规模验证，内置图标库和风格配置平台。

数据密集型 主题定制

Material Design 3 Google 官方

Google 官方设计规范（目前已更新到第 3 版），定义了颜色、排版、组件等标准。非组件库，而是设计语言本身。

设计规范 跨平台 Dynamic Color

MUI (Material UI) React

基于 Google Material Design 规范的第三方 React 组件库，全球使用最广泛，主题定制能力强。

Material Design 国际化

Radix UI React

无样式底层组件库，只管行为和无障碍，样式完全你说了算。shadcn/ui 的底层。

零样式 无障碍 完全定制

HeroUI React

原名 NextUI，基于 Tailwind CSS，开箱即用就好看，内置动画效果。

Tailwind CSS 开箱即用 现代感

组件库选择决策树

让 AI 帮你用组件库

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

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

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