如何选择适合的组件库？
在选型时，建议问自己以下三个问题：
产品类型是什么？
- B端 (后台/SaaS)： 效率第一。首选 Ant Design 或 Element Plus。不需要自己写 DatePicker 或 Table 的复杂逻辑。
- C端 (官网/活动页/面向大众)： 视觉第一。首选 Tailwind CSS + Headless UI (或 Shadcn/ui)，因为你需要高度定制独特的 UI。
团队技术栈与规范？
- 如果是 TypeScript 重度依赖，Naive UI (Vue) 或 MUI/Chakra (React) 的类型提示会更友好。
- 如果团队设计资源匮乏，直接用设计风格强烈的库（如 AntD）。
是否考虑 CSS 原子化？
- 如果团队习惯写 CSS/Sass，AntD/Element 没问题。
- 如果团队推崇 Tailwind CSS，强烈建议使用 Shadcn/ui 或 NextUI，因为传统的组件库很难和 Tailwind 完美融合。
如何自建组件库？
如果你是架构师或者想提升技术深度，搭建一套企业私有组件库是必经之路。
- 开发工具：
- Storybook: 组件开发的标配。用于隔离开发、测试和编写文档。
- Vite / Rollup: 打包工具的首选（Webpack 在库打包方面配置过于繁琐）。
- 代码管理：
- Monorepo (pnpm workspace / Turborepo): 适合管理多包架构（核心库、图标库、工具库分开）。
- Changesets: 管理版本发布和 Changelog 的神器。
- 核心难点：
- 主题定制 (Theming): 如何通过 CSS Variables 实现动态换肤
- Tree Shaking: 确保用户只引入了用到的组件，而不是整个包。
- TypeScript 类型生成: 提供完美的类型提示。
Headless UI (无头组件)
只提供交互逻辑和可访问性（Accessibility/A11y），完全不带样式。
Headless UI（无头用户界面）是一种前端开发方法论或设计模式，核心思想是将UI组件的逻辑与样式分离，仅提供交互功能和状态管理，不包含预设样式。开发者需自行通过CSS实现视觉表现。
代表库： Radix UI, Headless UI, TanStack Table, React Aria。
适用场景： 你有非常具体的设计稿（Design System），使用 AntD 这种自带强样式的库去覆盖样式会非常痛苦，这时候 Headless UI 是最佳选择。
核心特点
- 逻辑与样式分离：组件仅处理交互逻辑（如键盘导航、焦点管理），样式需开发者自定义 。
- 高度可定制：适用于不同UI风格但交互逻辑相似的场景，例如Tailwind CSS与Headless UI的结合 。
- 无预设样式：组件本身不渲染任何DOM元素，仅暴露API供外部调用 。
shadcn/ui
shadcn/ui is a set of beautifully-designed
它不是一个传统的组件库（你不能 npm install 它）。
- 核心理念： 它提供代码，你直接 Copy & Paste 到你的项目中。
- 技术栈： Radix UI (Headless 逻辑) + Tailwind CSS (样式)。
- 优势： 你拥有组件的全部代码，想怎么改就怎么改，彻底解决了“魔改组件库样式难”的问题。
tailwindcss
https://www.tailwindcss.cn/docs/installation
Element UI
https://element.eleme.cn/#/zh-CN
Element Plus
饿了么团队，Vue 生态的“老大哥”，文档和社区最成熟。Vue 项目的默认选择。 https://element-plus.org/#/zh-CN
Naive UI
尤雨溪推荐，TypeScript 支持极好，设计风格独特（有点偏极客）。追求 TS 体验和独特设计的项目。 https://www.naiveui.com/zh-CN/os-theme
TDesign
腾讯出品，支持 Vue/React/小程序等多端，设计体系统一。需要多端统一设计语言的大型项目。 https://static.tdesign.tencent.com/
Ant Design
阿里出品，企业级，生态最全，组件逻辑极其成熟。国内企业级后台、中台系统首选。 https://4x-ant-design.antgroup.com/components/form-cn/
Arco Design
字节跳动出品，设计风格更现代、轻盈，配置灵活。觉得 AntD 审美疲劳，想要更现代风格。
NutUI
京东出品，针对电商场景优化，组件丰富。(Vue/React)
React Bootstrap
https://react-bootstrap.github.io/
MUI (Material UI)
Google Material Design 风格，全球使用率最高，定制能力强。面向国际用户的产品。
Vant
有赞出品，移动端电商领域的绝对霸主，轻量、可靠。(VUE)
https://youzan.github.io/vant/#/zh-CN/
View UI
same
Build websites by chatting with AI
Flex 布局教程：语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
CSS Grid 网格布局教程
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
五种 CSS 经典布局
http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html
各种CSS生成器和JS代码片段
https://juejin.cn/post/7030572979868139551?utm_source=gold_browser_extension
CSS Tricks
CSS技巧收集与演示
http://css-tricks.neatbang.com/
CSS生成器
CSS渐变生成器
https://www.colorzilla.com/gradient-editor/
CSS3-Box Shadow(阴影>
https://www.html.cn/tool/css3Preview/Box-Shadow.html
贝塞尔曲线生成器
花纹背景生成器
花纹背景-pattern.css
https://github.com/bansal-io/pattern.css
3D字体
https://bennettfeely.com/ztext/
css-tricks
css技巧文章
You-need-to-know-css
CSS的各种DEMO，很全
https://lhammer.cn/You-need-to-know-css/#/zh-cn/
animista
CSS动画可视化工具，复制代码就能用
navnav
各种炫酷的CSS动画组件