↓ 点击下方卡片关注「OSC开源社区」
老牌的组件库
相信组件库这东西大家都不陌生吧？组件库其实就是大佬们提前封装好的一些组件的集合体，我们在项目中可以直接拿来使用，无论是Element-UI还是Ant-Design，想使用无非就是分几步：
NPM安装
页面引入
使用组件
这也是我们现在大部分项目都在使用组件库的方式，但是说实话，大家真的苦这种方式久矣
苦组件库久矣？
为什么说苦组件库久矣呢？当我们将Element-UI、Ant-Design这类组件库后，他们的代码会在node_modules中
但是大家都懂，组件库的功能或者样式不一定符合我们项目业务的要求，但是我们又不能直接修改node_modules中的源码，那咋办呢？
其实主要就是两点：
组件库的功能不符合业务需要咋办？
组件库的样式不符合UI设计稿咋办？
其实还是有办法的：
样式不满意，我们可以在页面中去使用样式覆盖
功能不满意，我们可以给组件库提
issue，然后等待作者去增加；或者可以通过一些类似pacth-package这种工具去给node_modules中的源码打补丁，从而达到修改源码的效果
但是始终不是我想要的~我以前就有一个想法~
为啥不直接把源码复制到项目中？
我以前就有一个想法，我们使用一个组件库或者库的时候，为啥不直接把他们的源码复制到项目中呢？
就拿组件库来说吧，比如我项目只需要使用Buttom、Input、Select这些组件，那我可以直接从组件库中把这些组件的源码复制到项目来，那我既可以使用这些组件，我又可以随便改这些组件的源码样式，从而达到我想要的效果
可惜，理想很美好，现实很骨感~因为这些组件库里的代码互相引用关系很复杂，所以你不可能很轻松把你想要的个别组件源码复制到项目来，所以基本没人这么做~
既然自己复制不了，那有没有组件库能提供这样的命令呢，比如运行一个ui add Button就可以把组件库的Button组件源码复制到项目中呢？
还真有，无头组件库（Headless Component Libraries）横空出世，它是一种新兴的前端开发模式，其核心在于将组件的逻辑和样式分离。
这种开发模式允许开发者在保持组件功能性的同时，完全控制组件的外观和风格，而不受特定UI框架的限制，优点有：
高度的灵活性和可定制性
轻量级和性能优化
提高开发效率
高度的可组合性
总结为一句话就是：无头组件库为你提供组件的基本架子，你可以随心所欲修改架子，修改样式，修改逻辑，已达到你的要求
Shadcn-UI
一个神级的无头组件库，无头组件库中的第一把交椅！！！
它就是Shadcn-UI！！！在去年的最受欢迎的 JavaScript 库中，Shadcn-UI夺下第一名，稳压Element-UI、Ant-Deisgn等一众老牌组件库
截止目前，github 上已经有67k stars
Shadcn-UI使用了tailwindcss来当做预设CSS，所以当你自定义样式时会非常方便
目前React、Vue版本都有
React 版本文档：https://ui.shadcn.com Vue版本文档：https://www.shadcn-vue.com/
想要使用Shadcn-UI你得先初始化一些配置，比如tailwindcss
接着你只需要使用命令
npx shadcn-ui@latest init比如你想使用Button组件，你可以使用命令行
npx shadcn-ui@latest add button这样它就会把Button这个组件放到你的项目中去
使用的话可以直接引入使用，你如果对他预设的 CSS 和 功能不满意，你也可以直接去到button.tsx中去修改
热门跟贴