SuperAPI AI 工具集

shadcn

前端与建站

查看项目

更新于 10-15 16:16

技能介绍

用途:shadcn/ui 面向使用 React 与 Tailwind CSS 的项目,提供可访问、可直接投入生产的 UI 组件。其核心理念是“复制粘贴组件,而非安装 npm 包”,组件被复制进项目后由开发者完全拥有代码。

主要能力:组件基于 Radix UI 无头原语构建,使用 Tailwind CSS 样式,TypeScript 优先,内置暗色模式支持,支持组合优于配置。技术栈包括 Radix UI、Tailwind CSS、TypeScript、class-variance-authority、clsx、tailwind-merge。组件目录位于 components/ui,工具函数位于 lib/utils。

使用方式:先初始化项目,命令为 npx shadcn-ui@latest init,随后按交互提示选择 TypeScript、样式(Default/New York)、基础色(Slate/Gray/Zinc/Neutral/Stone)、CSS 变量、React Server Components 等。添加组件使用 npx shadcn-ui@latest add button,可一次添加多个,如 npx shadcn-ui@latest add button card dialog form input。配置通过 components.json 管理 style、rsc、tsx、tailwind、aliases 等选项。

适用场景:适合使用 Next.js、Vite、Remix 或 Astro 构建的 React 应用,需要可访问、生产就绪组件,希望完全控制组件代码与样式,偏好组合而非配置,需要开箱即用暗色模式与 TypeScript 优先组件的场景。

限制:不适用于未使用 Tailwind CSS 的项目(样式核心依赖);不支持旧版浏览器(使用现代 CSS 特性);不适合偏好打包 npm 库而非代码所有权的团队;不适用于 Vue、Svelte、Angular 等非 React 框架。收费、价格与平台信息暂未提供。