shadcn如何使用

shadcn/ui 是目前最流行的前端 UI 组件库之一但它的使用方式与传统的 Ant Design 或 MUI 不同。它不是一个 npm 依赖包而是一个组件代码生成器。以下是 shadcn/ui 的核心使用流程1. 初始化项目首先你需要在现有的 React 项目推荐 Next.js, Vite, 或 Remix中运行初始化命令。这会创建components.json配置文件并配置 Tailwind CSS。npx shadcnlatest init在执行过程中它会询问你全局样式文件的位置、是否使用 TypeScript 以及你喜欢的颜色风格。2. 添加组件这是 shadcn 最独特的地方你只下载你需要的组件。例如如果你想使用按钮Button运行npx shadcnlatestaddbutton发生了什么它不会把代码藏在node_modules里。它会直接在你的项目目录下通常是components/ui/生成一个button.tsx文件。这意味着你拥有这个组件的全部代码你可以直接修改源代码来满足你的特殊需求。3. 在代码中使用像引用普通本地组件一样引入并使用它import { Button } from /components/ui/button export default function Home() { return ( div Button variantoutline点击我/Button /div ) }核心优势与技巧完全控制权因为代码在你的目录下你不需要通过复杂的theme配置去覆写样式直接改.tsx文件里的 Tailwind 类名即可。配合 Lucide Iconsshadcn 默认推荐使用lucide-react图标库配合使用效果极佳。CLI 自动处理依赖当你add一个复杂组件如 Calendar 或 Dialog时CLI 会自动帮你安装底层的无样式组件库Radix UI。常用命令表操作命令初始化npx shadcnlatest init添加组件npx shadcnlatest add [组件名]批量添加npx shadcnlatest add button card input检查更新npx shadcnlatest diff建议如果你是在做 AI 驱动的项目或复杂的前端架构shadcn 的这种“源代码交付”模式非常适合集成因为它能显著减少打包体积并提高自定义上限。开启一个新的Next.js项目如果准备开启一个新的Next.js项目那是使用 shadcn/ui 的最佳时机因为 shadcn/ui 本身就是围绕 Next.js 的特性如 App Router 和 Server Components进行优化的。按照以下步骤你可以快速搭建一个高性能、高颜值的开发环境第一步创建 Next.js 项目首先使用 Next.js 官方脚手架。确保勾选Tailwind CSS和TypeScript。npx create-next-applatest my-app--typescript--tailwind--eslint第二步运行 shadcn 初始化进入项目目录并执行初始化命令。它会自动检测你的tailwind.config.ts和路径别名。cdmy-app npx shadcnlatest init推荐配置建议Style:选择New York(更现代紧凑)。Base color:Slate或Zinc比较百搭。CSS variables:选择Yes(这样你可以通过修改 CSS 变量轻松换肤)。第三步安装基础布局组件对于一个新项目我建议先安装这几个高频组件它们能帮你迅速搭出页面框架npx shadcnlatestaddbutton navigation-menu card separator第四步实战建议针对 Next.js1. 区分服务端与客户端组件shadcn 的组件通常在顶部带有use client如果它们包含交互如 Dropdown。布局文件 (layout.tsx): 保持为服务端组件。交互部分: 将 shadcn 组件封装在小的客户端组件中或者直接在需要交互的页面顶部声明。2. 暗黑模式支持Next.js 配合 shadcn 实现暗黑模式非常简单。你需要安装next-themes安装npm install next-themes创建一个theme-provider.tsx。在layout.tsx中包裹住{children}。运行npx shadcnlatest add dropdown-menu来做一个切换按钮。3. 目录结构预览初始化完成后你的项目结构会变成这样├── app/ ├── components/ │ ├── ui/ -- 这里放 shadcn 自动生成的代码 (不要手动改除非要定制) │ └── main-nav.tsx -- 这里放你自己组合的业务组件 ├── lib/ │ └── utils.ts -- 包含重要的 cn() 函数用于动态合并 Tailwind 类名 ├── public/ ├── tailwind.config.ts └── components.json -- shadcn 的配置文件进阶使用v0.dev(可选但强烈推荐)既然你用的是 Next.js强烈建议关注v0.dev。这是 Vercel 开发的 AI 工具。你可以用自然语言描述一个 UI例如“一个带侧边栏的仪表盘”它会直接生成基于shadcn/ui Tailwind的代码。你只需要一键复制或使用npx v0 add就能把 AI 生成的组件搬进项目。