| 失效链接处理 |
|
11万 Star ! 告别传统UI框架,强烈推荐这个看得见,好维护,AI友好的全新一代 UI 库
相关截图:
![]() 主要内容:
一、它到底是什么?
一句话概括:shadcn/ui 不是那种「装个 npm 包就能用」的传统组件库,而是一套帮你把漂亮、好用的组件源码直接放进自己项目里的工具和方法。
官网有一句很直白的话:
This is not a component library. It is how you build your component library.(这不是一个组件库,而是你搭建自己组件库的方式。)
所以,别把它想成 Material UI 或 Ant Design 那种「黑盒依赖」。你装下来的每一个按钮、对话框、表单,源码都在你的项目里,想改样式、改逻辑,直接打开文件改就行。
二、为什么和传统 UI 库不一样?
传统 UI 库的典型用法是这样的:
npm install xxx-ui
从包里 import { Button } from 'xxx-ui'
想深度定制时,往往要和组件提供的 props、主题变量较劲
shadcn/ui 换了一条路:
在项目里运行 CLI 命令
组件源码被复制到 components/ui/ 目录
从此这个组件属于你,和普通业务代码没区别
这种方式的好处很实在:
看得见:组件怎么写的,一目了然
改得动:不用和库的封装层斗智斗勇
好维护:团队可以按自己的设计规范慢慢演进
AI 友好:代码在本地,AI 助手也更容易读懂和帮你改
|


苏公网安备 32061202001004号
