用途:shadcn/ui 是一套美观且可访问的 UI 组件集合与代码分发平台,基于 TypeScript、Tailwind CSS 和 Radix UI 原语构建。它不是传统组件库,而是可复制粘贴到应用中的可复用组件。本技能适用于使用 React 系框架(Next.js、Vite、Remix、Astro 等)构建界面、添加预置可访问组件、用 Tailwind CSS 实现设计系统、搭建带校验的表单(React Hook Form + Zod)、添加数据表格/图表/复杂 UI 模式、实现暗色主题与定制组件外观。参考地址:https://ui.shadcn.com/llms.txt。
主要能力与核心理念:开放代码(组件复制进项目可自由修改)、组合(基于 Radix UI 可组合原语)、分发(通过 CLI 而非 npm 包)、美观默认样式、面向 AI 集成。技术栈含 TypeScript、Tailwind CSS(v3/v4)、Radix UI、Class Variance Authority、React 19。
使用方式:推荐 CLI 初始化 npx shadcn@latest init;添加组件 npx shadcn@latest add button,可一次多个或 npx shadcn@latest add --all。添加后组件文件复制到 components/ui/,自动安装依赖。手动方式需安装 tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react,创建 components.json 并配置 Tailwind 与 lib/utils.ts 的 cn 工具函数。组件含表单输入(Button、Input、Form、Select、Checkbox、Date Picker)、布局导航(Card、Tabs、Accordion、Navigation Menu)、浮层对话框(Dialog、Drawer、Popover、Toast、Command)、反馈状态(Alert、Progress、Skeleton)、展示组件(Table、Data Table、Avatar、Badge)。主题定制支持 next-themes 暗色模式、CSS 变量与 Tailwind 配置调色,组件可直接改源码增删变体。
限制:资料未提供收费、价格与具体平台支持范围等信息。