安装Shadcn及依赖

前置条件

在安装Shadcn之前，请确保已完成：

  • Node.js (v16或更高版本) 和 npm/yarn/pnpm 的安装
  • 已创建React项目（通过Create React App/Vite等工具）
  • 已配置Tailwind CSS（参考2.4节）

安装步骤

1. 通过CLI工具安装

npx shadcn-ui@latest init

该命令会：

  • 自动检测项目类型（Next.js/React等）
  • 安装必需的依赖项
  • 生成初始配置文件

2. 手动安装（可选）

npm install @shadcn/ui @radix-ui/react-icons
# 或
yarn add @shadcn/ui @radix-ui/react-icons
# 或
pnpm add @shadcn/ui @radix-ui/react-icons

3. 核心依赖说明

依赖包作用
@shadcn/ui核心组件库
@radix-ui/react-icons图标库
tailwindcssCSS框架
clsx动态class处理
tailwind-mergeTailwind类名合并工具

配置文件

安装完成后会生成/修改以下文件：

  • components.json (Shadcn组件配置)
  • tailwind.config.js (Tailwind扩展配置)
  • global.css (添加基础样式)

验证安装

  1. 在项目中添加测试组件：
import { Button } from "@shadcn/ui"

function App() {
  return <Button>测试按钮</Button>
}
  1. 运行开发服务器应显示样式正确的按钮

常见问题解决

  • 版本冲突：确保所有依赖包版本兼容
  • 样式不生效：检查Tailwind配置是否包含Shadcn预设
  • TypeScript错误：确认已安装@types/react等类型定义

下一步

建议继续学习：

Last Updated::