用途:shadcn/ui 用于在项目中实现 UI 组件,覆盖组件安装、配置(如 Vite、TanStack Router)与集成。组件以代码复制方式进入项目,而非作为依赖安装。
主要能力:提供基于 TypeScript、Tailwind CSS 与 Radix UI 的可访问组件,支持 Next.js、Vite、Remix、Astro、TanStack Router/Start、React Router、Laravel、Gatsby 等框架;提供 CLI 与注册表系统用于安装、发布与分发组件;组件涵盖表单与输入、布局与导航、遮罩与对话框、反馈与状态、展示与媒体等类别;支持主题、暗色模式与表单集成(如 React Hook Form、TanStack Form、Next.js Server Actions)。
使用方式:初始化 npx shadcn@latest init;添加组件 npx shadcn@latest add button(可一次添加多个或 --all);查看差异 npx shadcn@latest diff。配置由 components.json 管理,包含 style、rsc、tsx、tailwind、aliases 等字段。TanStack Router 可用 npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn 创建预配置项目。Vite 需先安装 Tailwind CSS,配置 TypeScript 路径别名与 Vite resolve.alias,再执行 init。手动安装需安装 class-variance-authority、clsx、tailwind-merge、lucide-react、tw-animate-css 等依赖,并创建 cn() 辅助函数与 components.json。
适用场景:需要在 React 系框架中快速搭建一致、可定制的界面组件时使用。
限制:资料未提供具体收费、价格、性能数据或服务条款等信息;组件为复制到项目中的代码,后续更新需自行管理;具体框架兼容细节以对应官方文档为准。