这是什么?
shadcn/ui 是一组设计精美、支持无障碍访问的 React 组件,并带有经过精心考虑的默认设置。你可以把它们直接复制到自己的代码库中,而不是作为锁定版本的依赖安装,因此可以自由地定制和扩展。
这是我需要导入的组件库,还是别的什么东西?
它采用的是“Open Code”(开放代码)模式:不是一个黑盒的 npm 包,而是通过 CLI 把组件的实际源代码文件添加到你的项目中,让你完全掌控并可以编辑代码。
我该如何把组件添加到项目中?
你使用 shadcn CLI 初始化项目并逐个添加组件,CLI 会把组件源代码复制到你的代码库中(支持 Next.js、Vite、Laravel 等框架)。
使用它需要 Tailwind 和 React 吗?
需要。组件使用 Tailwind CSS 进行样式设计,并基于 React 基础组件(Radix UI、React Aria Components)构建,因此你的项目必须已经配置好这些依赖。
除了 Next.js,shadcn/ui 还支持哪些框架?
根据项目的主题标签,其注册表和工具链还支持 Vite、Laravel 以及基于 TanStack 的项目。
“Open Code”相比普通的 npm 组件库有什么好处?
由于组件源代码就保存在你的代码仓库中,你不必再为依赖版本冲突而头疼,也无需依赖各种主题覆盖之类的取巧做法。直接编辑文件,就能得到你想要的行为和外观。
它支持 AI 生成的界面(gen-ui)吗?
支持。该项目带有 generative-ui 和 gen-ui 标签,表明除了标准注册表之外,它还支持 AI 辅助或生成式的组件工作流程。
What are similar projects?
arc-library, rare-ui, canvas-ui, Monocharts, awesome-shadcn-ui, json-render, solid-glass, tweakcn
Which topics is it in?
generative-ui, radix-ui, shadcn, laravel, shadcn-ui, components, design-system, tailwindcss, vite, component-library, nextjs, ui-components
