SuperAPI AI 工具集

shadcn-ui

前端与建站

查看项目

更新于 10-15 22:11

技能介绍

用途:shadcn/ui 面向使用 React 与 Tailwind CSS 的项目,提供可访问、可用于生产的 UI 组件。其核心理念是复制粘贴组件而非安装 npm 包,组件代码写入项目目录,开发者拥有完整所有权与定制控制。

主要能力:组件基于 Radix UI 无头原语构建,使用 Tailwind CSS 样式,TypeScript 优先,内置暗色模式支持,默认可 tree-shake。技术栈包括 Radix UI、Tailwind CSS、TypeScript、class-variance-authority、clsx 与 tailwind-merge。组件目录位于 components/ui/,通过 lib/utils.ts 中的 cn() 合并类名。

使用方式:在项目中运行 npx shadcn@latest init 初始化,按提示选择 TypeScript、样式(Default/New York)、基础色、CSS 变量、React Server Components 等;再用 npx shadcn@latest add button 等命令添加单个或多个组件。配置写入 components.json,主题通过 globals.css 中的 CSS 变量与 tailwind.config.ts 控制。

适用场景:适合使用 Next.js、Vite、Remix 或 Astro 的 React 项目,需要无障碍、可定制、偏好组合而非配置、需要暗色模式与 TypeScript 的场景。

限制:必须使用 Tailwind CSS;使用现代 CSS 特性,不支持旧版浏览器;不适合偏好打包 npm 库、或使用 Vue、Svelte、Angular 等非 React 框架的项目。具体收费、价格与平台信息暂未提供。