shadcn/ui 一个真·灵活的组件库

当前主流组件库的问题

我之前使用过很多组件库，比如 MUI，AntDesign，ElementUI，等等。他们都是很出名的组件库。

优点就不说了。他们的缺点是不灵活。

不灵活有 2 个原因。

生态不开放

第 1 个不灵活的原因是我感觉选了一家之后，就得一用到底，没有办法使用其他派系的组件了，比如我觉得 MUI 中的表格不好，Ant Design 的表格好，但是我无法在 MUI 中使用 AntDesign 的表格组件，因为在一个项目中无法同时使用 Mui 和 AntDesign。

无法使用的原因组件库把样式和组件库绑定在一起了，MUI 和 AntD 的样式又是不兼容的。使用了一个组件库，就需要套一个 ConfigProvider 或 ThemeProvider, 套上之后，就把地盘占领了，其他组件库就没法再套了。

修改不方便

第 2 个不灵活的原因要修改定制二次开发一个组件时感觉很麻烦，成本很高。有时需要看很多文档才能找到怎么修改，有时直接就无法修改。

Headless UI

为了解决组件库不灵活的问题，出现了无头组件库（ headless ui ），不过 headless ui 虽然灵活却不方便。

如果要写一个按钮，按钮的各种状态都需要自己来关心，那还不如直接用大而全的组件库。大部分场景中，方便的优先级还是大于灵活的。

这也是为什么 radix-ui 一开始做了一个 headless 组件库，http://www.radix-ui.com/primitives , 后来又做了一个带主题的组件库

shadcn/ui

shadcn/ui 的优势正是解决了上面两个问题，同时又尽量保留了组件库使用方便的优势。

真·灵活

shadcn/ui 给人的感觉没有什么负担，因为 shadcn/ui ，主打一个按需加载，真·按需加载，加载组件的方式是通过命令把代码加到你的项目中，而不是从依赖中引用代码，所以代码不在外部依赖 node_modules 中，直接在自己的项目源代码中，不会有依赖了重重的一坨代码的感觉。因为都是源代码，这样你可以直接随意修改，二次开发。实际场景中，通常是不需要修改的，在偶尔需要修改是也很灵活，大不了复制粘贴一份，总比“明明知道怎么实现却无法实现强”。

拥抱 Tailwindcss

shadcn/ui 使用了 tailwindcss 作为样式方案，这样可以复制 tailwindcss 生态中的其他代码，比如 tailspark.co/ 和 flowbite.com/ ，一下子生态就大了很多，而且修改起来也方便。

方便

通过官方封装组件 + CLI 命令，灵活的同时并没有明显降低效率

比如要使用按钮组件，ui.shadcn.com/docs/compon… , 直接通过一行命令添加后就可以使用了 npx shadcn-ui@latest add button

总结

总结 shancn/ui 的优点