shadcn/ui 入门指南：认识并开始使用这个流行的 UI 库
在现代前端开发领域，构建美观、响应迅速且用户体验良好的界面是核心任务之一。为了提高开发效率，开发者们依赖于各种 UI 组件库。在众多选择中，shadcn/ui 近年来异军突起，凭借其独特的理念和卓越的灵活性，迅速赢得了社区的广泛认可和喜爱。
本文将深入探讨 shadcn/ui 是什么、为什么它如此受欢迎，并提供一个详细的入门指南，帮助你从零开始，认识并成功地在你的项目中集成和使用 shadcn/ui。
一、初识 shadcn/ui：它到底是什么？
首先，让我们破除一些可能存在的误解。shadcn/ui 不是一个传统的 npm 包，你不能简单地通过 npm install shadcn-ui 或 yarn add shadcn-ui 来将其作为一个完整的库引入你的项目。
那么，shadcn/ui 究竟是什么呢？
shadcn/ui 的核心理念是提供一系列精心设计、可复制粘贴（copy-paste）的 React 组件代码。这些组件基于 Radix UI 的无头组件（headless components）和 Tailwind CSS 进行构建和样式化。
关键特点总结：
- 非传统库： 你不安装一个整体的库，而是选择需要的组件，然后将这些组件的代码文件直接复制到你的项目源代码中。
- 基于 Radix UI： 利用 Radix UI 提供了高质量、无障碍且功能强大的无头组件（Headless components），这意味着 Radix UI 负责组件的交互逻辑、状态管理和无障碍特性，但不提供任何样式。
- 基于 Tailwind CSS： 使用 Tailwind CSS 来为组件提供样式。Tailwind CSS 是一个原子化 CSS 框架，通过组合实用类来快速构建界面。
- 可定制性极强： 由于组件代码直接存在于你的项目中，你可以完全控制和修改每个组件的每一个细节，包括结构、样式和行为。
- 自托管： 组件的代码是你项目的一部分，这意味着你不需要担心库的更新会突然破坏你的界面（但你需要自行管理组件的更新）。
这种模式与传统的 UI 库（如 Material UI、Ant Design、Chakra UI）有显著区别。传统库通常作为一个整体包安装，你通过导入组件来使用它们，并通过 props 或自定义主题来修改样式。虽然方便，但在深度定制方面有时会遇到挑战。而 shadcn/ui 则赋予了开发者对组件完全的所有权。
二、为什么选择 shadcn/ui？它带来了哪些优势？
shadcn/ui 之所以能在短时间内如此流行，得益于其独特的设计哲学所带来的诸多优势：
- 无与伦比的定制能力： 这是
shadcn/ui最核心的优势。因为组件代码就在你的项目中，你可以像修改自己的代码一样修改它们。无论是微调样式、更改 DOM 结构，还是添加额外的功能，都易如反掌。你不再需要与复杂的样式覆盖规则或主题配置系统作斗争。 - 更小的 Bundle Size： 由于你只复制代码你需要使用的组件，而不是导入一个包含所有组件的庞大库，最终的 JavaScript bundle 体积会更小。
- 更好的控制和更少的抽象： 你清楚地知道组件是如何实现的，没有黑盒。这使得调试和理解组件行为变得更加容易。
- 基于无障碍设计的 Radix UI： Radix UI 在无障碍性方面做得非常出色，它为复杂的 UI 模式（如模态框、下拉菜单、工具提示等）提供了坚实的基础，确保使用
shadcn/ui构建的应用具有良好的可访问性。 - 拥抱 Tailwind CSS： 如果你的项目已经或计划使用 Tailwind CSS，那么
shadcn/ui将是一个非常自然的选择。它完美地融入了 Tailwind 的开发工作流程。 - 灵活性： 你可以根据自己的需求调整或替换组件使用的技术栈（尽管默认是 Radix + Tailwind，但因为你有代码，理论上可以魔改）。
- 良好的起点：
shadcn/ui提供的组件不仅美观，而且代码质量高，结构清晰，是学习如何构建高质量 React 组件的优秀范例。
当然，这种模式也有其挑战，主要是需要开发者自行管理组件的更新。当 shadcn/ui 官方发布组件更新时，你需要通过命令手动拉取更新到你的项目中，这需要一些额外的维护工作。但许多开发者认为，为了获得极致的灵活性和控制力，这种权衡是值得的。
三、开始使用 shadcn/ui：详细的入门指南
了解了 shadcn/ui 的基本概念和优势后，我们现在进入实操环节。本指南将基于一个常见的现代前端项目结构，通常是使用 Next.js 或 Vite 创建的 React 项目，并已经配置了 Tailwind CSS。
准备工作
在开始之前，请确保你的开发环境满足以下条件：
- Node.js: 安装了最新 LTS 版本或更新的 Node.js。
- 包管理器: 使用 npm、yarn 或 pnpm 中的一种。
- React/Next.js/Vite 项目: 已经创建了一个基于 React 的项目。
- TypeScript (推荐):
shadcn/ui强烈推荐使用 TypeScript，这能提供更好的开发体验和类型安全。 - Tailwind CSS: 你的项目已经安装并配置了 Tailwind CSS。如果你的项目还没有，建议先按照 Tailwind CSS 的官方文档进行设置。使用
create-next-app或create-vite并选择包含 Tailwind CSS 的模板是快速开始的好方法。
第一步：初始化项目与 Tailwind CSS 设置
如果你已经有了一个基于 React/Next.js/Vite 并配置好 Tailwind CSS 的项目，可以跳过这部分。
使用 Next.js (推荐):
创建新的 Next.js 项目时，可以直接选择包含 Tailwind CSS 和 TypeScript 的模板。
bash
npx create-next-app@latest my-shadcn-app --typescript --tailwind --eslint
按照命令行提示完成创建。进入项目目录：
bash
cd my-shadcn-app
使用 Vite:
创建新的 Vite 项目，选择 React 和 TypeScript，然后手动添加 Tailwind CSS。
bash
npm create vite@latest my-shadcn-app --template react-ts
cd my-shadcn-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
修改 tailwind.config.js 文件，配置 content 以包含你的模板文件路径（通常是 src/**/*.{js,jsx,ts,tsx} 或 ./src/**/*.{js,jsx,ts,tsx}）：
javascript
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx}", // Adjust path if needed
],
theme: {
extend: {},
},
plugins: [],
}
在你的主 CSS 文件（例如 src/index.css 或 src/globals.css）中添加 Tailwind 指令：
css
/* src/index.css or src/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
确保你的应用入口文件 (src/main.tsx 或 pages/_app.tsx) 引入了这个 CSS 文件。
第二步：初始化 shadcn/ui 配置
这是集成 shadcn/ui 的核心步骤。在你的项目根目录下运行以下命令：
bash
npx shadcn-ui@latest init
这个命令会引导你进行一系列配置。你需要根据你的项目结构和偏好进行选择。以下是配置过程的详细说明和常见选择：
“`bash
npx shadcn-ui@latest init
欢迎信息…
Which style would you like to use?
选择你喜欢的风格。你可以先选择一个，之后也可以修改。默认是 “Default”。
可选项：Default, New York, …
例如输入: Default
Which color would you like to use as base color?
选择一个基础色调。这会影响一些组件的默认颜色。之后也可以修改。
可选项：Slate, Gray, Zinc, Neutral, Stone, Red, Rose, Yellow, Green, Blue, Uvil, Cyan, Sky, …
例如输入: Slate
Would you like to use CSS variables for colors?
是否使用 CSS 变量来管理颜色？强烈推荐选择 “yes”，这使得主题定制更加灵活。
例如输入: yes
Where is your global CSS file?
输入你的全局 CSS 文件路径。
例如输入: src/index.css (Vite) 或 app/globals.css (Next.js App Router) 或 styles/globals.css (Next.js Pages Router)
Would you like to use TypeScript (recommended)?
是否使用 TypeScript？强烈推荐选择 “yes”。
例如输入: yes
Configure the import alias for components:
配置组件的导入别名。这是因为组件代码会复制到你的项目中，为了方便导入，会设置一个路径别名。
默认是 “@components”。如果你使用了 src 目录，通常会是 “@/components”。
例如输入: “@/components”
Configure the import alias for utils:
配置工具函数的导入别名。 shadcn/ui 提供了一些实用的工具函数，通常放在 lib/utils 中。
默认是 “@lib/utils”。如果你使用了 src 目录，通常会是 “@/lib/utils”。
例如输入: “@/lib/utils”
Are you using React Server Components?
如果你使用 Next.js 13/14 的 App Router，并且计划在服务器组件中使用 shadcn/ui 组件（注意：带有交互的组件通常需要在客户端使用），选择 “yes”。否则选择 “no”。
例如输入: yes (For Next.js App Router) 或 no (For Vite/Next.js Pages Router)
Write configuration to components.json. Proceed? (yes/no)
确认将配置写入 components.json 文件。输入 “yes” 继续。
例如输入: yes
“`
配置完成后，会在你的项目根目录下生成一个 components.json 文件。这个文件记录了你的配置选择，shadcn/ui 的 CLI 工具会读取这个文件来决定组件下载的位置、使用的样式别名等。
同时，你的 tailwind.config.js 和全局 CSS 文件也会被修改，以集成 shadcn/ui 的颜色变量、主题扩展等配置。
components.json 示例：
json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default", // 你选择的风格
"tailwind": {
"config": "tailwind.config.js",
"css": "src/index.css", // 你的全局 CSS 文件
"baseColor": "slate", // 你选择的基础色
"cssVariables": true // 是否使用 CSS 变量
},
"rsc": true, // 是否使用 RSC
"aliases": {
"components": "@/components", // 组件别名
"utils": "@/lib/utils" // 工具函数别名
}
}
tailwind.config.js 修改示例（会添加 theme 扩展）：
“`javascript
// tailwind.config.js
import { withUt } from ‘uploadthing/tw’; // 如果你使用了 uploadthing
/ @type {import(‘tailwindcss’).Config} */
const config = {
darkMode: [‘class’],
content: [
‘./pages//.{ts,tsx}’,
‘./components//.{ts,tsx}’, // shadcn/ui 组件会放在这里
‘./app//*.{ts,tsx}’,
‘./src//*.{ts,tsx}’, // 你的其他组件/页面
],
prefix: ”,
theme: {
container: {
center: true,
padding: ‘2rem’,
screens: {
‘2xl’: ‘1400px’,
},
},
extend: {
colors: {
border: ‘hsl(var(–border))’,
input: ‘hsl(var(–input))’,
ring: ‘hsl(var(–ring))’,
background: ‘hsl(var(–background))’,
foreground: ‘hsl(var(–foreground))’,
primary: {
DEFAULT: ‘hsl(var(–primary))’,
foreground: ‘hsl(var(–primary-foreground))’,
},
secondary: {
DEFAULT: ‘hsl(var(–secondary))’,
foreground: ‘hsl(var(–secondary-foreground))’,
},
destructive: {
DEFAULT: ‘hsl(var(–destructive))’,
foreground: ‘hsl(var(–destructive-foreground))’,
},
muted: {
DEFAULT: ‘hsl(var(–muted))’,
foreground: ‘hsl(var(–muted-foreground))’,
},
accent: {
DEFAULT: ‘hsl(var(–accent))’,
foreground: ‘hsl(var(–accent-foreground))’,
},
popover: {
DEFAULT: ‘hsl(var(–popover))’,
foreground: ‘hsl(var(–popover-foreground))’,
},
card: {
DEFAULT: ‘hsl(var(–card))’,
foreground: ‘hsl(var(–card-foreground))’,
},
},
borderRadius: {
lg: ‘var(–radius)’,
md: ‘calc(var(–radius) – 2px)’,
sm: ‘calc(var(–radius) – 4px)’,
},
keyframes: {
‘accordion-down’: {
from: { height: 0 },
to: { height: ‘var(–radix-accordion-content-height)’ },
},
‘accordion-up’: {
from: { height: ‘var(–radix-accordion-content-height)’ },
to: { height: 0 },
},
},
animation: {
‘accordion-down’: ‘accordion-down 0.2s ease-out’,
‘accordion-up’: ‘accordion-up 0.2s ease-out’,
},
},
},
plugins: [require(‘tailwindcss-animate’)], // 添加 animate 插件，用于一些动画效果
};
// 如果你使用了 uploadthing
// export default withUt(config);
export default config;
“`
全局 CSS 文件修改示例（会添加 CSS 变量）：
“`css
/ src/index.css or app/globals.css /
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
–background: 0 0% 100%; / White /
–foreground: 222.2 84% 4.9%; / Almost Black /
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%; /* Dark Blue/Gray */
--primary-foreground: 210 40% 98%; /* Off White */
--secondary: 210 40% 96.1%; /* Light Gray */
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%; /* Light Gray */
--muted-foreground: 215.4 16.3% 46.9%; /* Medium Gray */
--accent: 210 40% 96.1%; /* Light Gray */
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%; /* Red */
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.6% 91.4%; /* Light Border Gray */
--input: 214.3 31.6% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem; /* Default rounded corner size */
}
.dark {
–background: 222.2 84% 4.9%;
–foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.4% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.4% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.4% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.4% 17.5%;
--input: 217.2 32.4% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border; / Apply default border color /
}
body {
@apply bg-background text-foreground; / Apply default background and text color /
}
}
“`
这些修改设置了基于 CSS 变量的颜色系统和圆角大小，并将其与 Tailwind CSS 的类名关联起来 (bg-primary, rounded-lg 等会使用这些 CSS 变量)。
第三步：添加你的第一个组件
初始化完成后，你就可以开始添加你需要的组件了。使用 shadcn/ui CLI 工具来添加组件非常简单：
bash
npx shadcn-ui@latest add <component-name>
例如，我们来添加一个最常用的组件：Button。
bash
npx shadcn-ui@latest add button
运行命令后，CLI 会从 shadcn/ui 的仓库下载 Button 组件的源代码，并将其保存到你的项目中的指定目录下（根据你在 components.json 中配置的 components 别名）。
如果你的 components 别名是 “@/components”，并且你使用了 src 目录，那么文件通常会保存在 src/components/ui/button.tsx 和 src/components/ui/index.ts。
src/components/ui/button.tsx: 包含Button组件的 React/TypeScript 源代码。src/components/ui/index.ts: 导出了Button组件，方便后续导入。
你现在可以打开 button.tsx 文件，查看 Button 组件的实现代码。你会看到它使用了 Radix UI 的 Button 原语（尽管 Button 可能直接是一个原生的 button 元素，但其他复杂组件如 Dialog, Dropdown Menu 等会大量依赖 Radix Primitives），并应用了大量的 Tailwind CSS 类。
第四步：使用组件
添加组件后，你就可以在你的 React 组件或页面中使用它了。由于你在初始化时配置了导入别名，导入会非常简洁。
例如，在 Next.js 的 app/page.tsx 或 Vite 的 src/App.tsx 中使用 Button：
“`tsx
// 例如: src/App.tsx (Vite) 或 app/page.tsx (Next.js App Router)
import { Button } from “@/components/ui/button”; // 注意这里的路径使用了别名
function App() {
return (
);
}
export default App;
“`
启动你的开发服务器 (npm run dev 或 yarn dev 或 pnpm dev)，访问页面，你应该能看到一个默认样式的按钮。点击按钮，会触发 alert 弹窗。
恭喜！你已经成功地在你的项目中集成了并使用了第一个 shadcn/ui 组件。
第五步：定制组件
如前所述，shadcn/ui 的一大亮点是其强大的定制能力。你可以通过以下几种方式进行定制：
-
使用 Props:
shadcn/ui的组件通常会暴露一些 prop 来控制其变体、大小等。例如，Button组件有variant(default, secondary, destructive, outline, ghost, link) 和size(default, sm, lg, icon) 等 prop。tsx
<Button variant="secondary" size="lg">
大号次级按钮
</Button>
<Button variant="destructive">
危险操作
</Button> -
添加 Tailwind CSS 类: 所有组件都接受标准的
classNameprop，你可以像给任何 HTML 元素或 React 组件添加样式一样，直接添加 Tailwind CSS 类来覆盖或扩展默认样式。tsx
<Button className="bg-green-500 hover:bg-green-600 text-white rounded-full">
自定义样式按钮
</Button>
这里的 Tailwind 类会覆盖组件内部的默认样式。 -
直接修改组件源代码: 这是
shadcn/ui最强大的定制方式。如果你需要进行更深层次的修改，比如改变组件的内部结构、添加新的插槽、修改 Radix UI 原语的 props，或者完全改变其样式逻辑，你可以直接打开组件的.tsx文件进行编辑。例如，你想在
Button组件的文本前添加一个图标，并且控制图标的间距，但组件默认没有提供这样的 prop。你可以编辑src/components/ui/button.tsx文件，在Button组件的实现中添加一个iconprop，并在children前渲染图标。“`tsx
// src/components/ui/button.tsx – 示例修改
import * as React from “react”;
import { Slot } from “@radix-ui/react-slot”;
import { cva, type VariantProps } from “class-variance-authority”;import { cn } from “@/lib/utils”;
// … buttonVariants 定义不变 …
export interface ButtonProps
extends React.ButtonHTMLAttributes,
VariantProps{
asChild?: boolean;
// 添加一个新的 icon prop
icon?: React.ReactNode;
}const Button = React.forwardRef
({ className, variant, size, asChild = false, icon, …props }, ref) => { // 接收 icon prop
const Comp = asChild ? Slot : “button”;
return (
{/ 如果有 icon prop，渲染 icon 并在后面添加间距 /}
{icon && {icon}}
{props.children} {/ 渲染子元素 (按钮文本) /}
);
}
);
Button.displayName = “Button”;export { Button, buttonVariants };
“`
现在你就可以这样使用带图标的按钮了：“`tsx
import { Button } from “@/components/ui/button”;
import { PlusIcon } from “@radix-ui/react-icons”; // 示例图标库function MyComponent() {
return (
}>
添加新项
);
}
``shadcn/ui` 提供极致灵活性的关键。
这种直接修改源代码的能力是 -
通过 CSS 变量和
tailwind.config.js进行主题定制： 在初始化步骤中，shadcn/ui在你的全局 CSS 文件中添加了许多 CSS 变量（如--primary,--border,--radius等），并在tailwind.config.js中将这些变量映射到了 Tailwind 的颜色和圆角类名。你可以通过修改这些 CSS 变量来全局改变组件的颜色和圆角样式。
-
修改 CSS 变量值: 直接编辑全局 CSS 文件中的
:root选择器内的变量值。这些值通常是 HSL 格式。“`css
/ src/index.css or app/globals.css /
@layer base {
:root {
/ 修改主色调 /
–primary: 142.1 76.2% 36.3%; / Green /
–primary-foreground: 355.7 82.3% 41.8%; / Dark Red //* 修改圆角 */ --radius: 1rem; /* 更大的圆角 */ /* ... 其他变量 ... */}
/ … dark mode 变量 … /
}
``–primary
保存后，所有使用和–radius变量的shadcn/ui` 组件都会相应更新样式。 -
修改
tailwind.config.js: 你可以在theme.extend.colors和theme.extend.borderRadius中进一步自定义或添加新的颜色和圆角映射。你也可以修改theme.extend.keyframes和theme.extend.animation来调整动画效果。
这种主题定制方式非常强大和灵活，允许你在不修改组件源代码的情况下，轻松地为整个应用定义一致的视觉风格。
-
第六步：探索更多组件
shadcn/ui 提供了丰富的组件，涵盖了从基础的 Button、Input 到复杂的 Dialog、Dropdown Menu、DataTable 等。你可以访问 shadcn/ui 的官方网站（https://ui.shadcn.com/docs/components）查看所有可用的组件列表和它们的文档。
要添加任何新组件，只需再次运行 npx shadcn-ui@latest add <component-name> 命令即可。
例如：
bash
npx shadcn-ui@latest add dialog # 添加 Dialog 组件 (模态框)
npx shadcn-ui@latest add form # 添加 Form 组件 (基于 react-hook-form 和 zod)
npx shadcn-ui@latest add data-table # 添加 DataTable 组件 (基于 tanstack/react-table)
每当你添加一个新组件，相关的代码文件就会出现在你的 @/components/ui 目录下。
第七步：处理组件更新
正如前面提到的，组件更新是 shadcn/ui 模式下需要手动管理的部分。当 shadcn/ui 官方仓库中的组件有更新或 bug 修复时，你可以选择性地更新你的项目中的对应组件。
更新某个组件的方式与添加组件类似：
bash
npx shadcn-ui@latest add <component-name>
例如，要更新 Button 组件，再次运行：
bash
npx shadcn-ui@latest add button
CLI 会提示该组件已存在，并询问你是否要覆盖现有文件。如果你在本地修改过该组件的代码，覆盖会导致你的修改丢失！
更新策略建议：
- 没有修改过: 如果你没有对组件的源代码进行过任何修改，直接选择覆盖即可。
- 修改过: 如果你修改过组件的源代码，你需要谨慎处理。
- 手动合并: 最安全但最繁琐的方式是，查看官方更新的代码，然后手动将其变更合并到你修改过的本地文件。
- 比较工具: 使用代码比较工具 (
diff) 来查看官方代码与你本地代码的区别，然后选择性地采纳变更。 - 暂时覆盖并重现修改: 如果修改不多且容易重现，可以先覆盖，然后重新应用你的本地修改。
- 考虑派生或组合: 如果你的修改非常独特且复杂，或者你想保持本地修改与官方更新分离，可以考虑将修改后的组件另存为项目的内部组件（例如
components/my-custom/button.tsx），或者创建一个新的组件来组合shadcn/ui的基础组件并添加你的自定义逻辑。
因为这种手动更新的特性，建议在开始对 shadcn/ui 组件进行深度源代码修改之前，仔细考虑权衡利弊，并做好版本控制。
第八步：其他重要提示
- Utils 函数:
shadcn/ui在初始化时会在你的项目（通常在lib/utils.ts）中添加一个cn工具函数。这是一个非常实用的函数，用于合并 Tailwind CSS 类名，并能智能处理条件类名和重复类名。它通常基于clsx或classnames和tailwind-merge库实现。在使用组件时，你会频繁地看到它的身影，学会在自己的代码中利用它。 - 无障碍性 (Accessibility): 由于基于 Radix UI，
shadcn/ui组件在交互行为上具有良好的无障碍性。但请记住，最终应用的无障碍性也取决于你如何使用这些组件、提供的内容以及整体页面结构。 - 响应式设计:
shadcn/ui组件的样式是基于 Tailwind CSS 的，天然支持响应式设计。你可以直接在组件的className中使用 Tailwind 的响应式前缀（如sm:,lg:等）。 - 暗黑模式 (Dark Mode):
shadcn/ui提供了良好的暗黑模式支持，通过 CSS 变量和 Tailwind 的dark:前缀实现。在初始化时，如果你选择使用 CSS 变量，就会设置好暗黑模式的变量。你需要在你的应用中实现一个切换暗黑模式的逻辑，通常通过在<html>元素上切换dark类来实现。 - 社区和文档:
shadcn/ui有活跃的社区和不断完善的文档。遇到问题时，查阅官方文档或在社区寻求帮助是很好的途径。
四、总结
shadcn/ui 提供了一种全新的 UI 组件使用体验。它不是一个传统的库，而是一系列高质量、基于 Radix UI 和 Tailwind CSS 的组件代码片段，供你复制、粘贴并完全拥有。这种模式带来了前所未有的定制灵活性和对代码的完全控制，同时受益于 Radix UI 的无障碍性和 Tailwind CSS 的高效样式化能力。
从初始化配置到添加第一个组件，再到深度定制和主题化，shadcn/ui 为开发者提供了一个强大且灵活的工具集，用于构建现代、美观且高性能的 React 应用。虽然需要开发者自行管理组件的更新，但对于追求极致定制和掌控项目依赖的团队来说，这是一个非常值得投入和使用的 UI 解决方案。
现在，你已经对 shadcn/ui 有了全面的认识，并掌握了基本的入门步骤。是时候开始在你自己的项目中尝试并构建令人惊艳的界面了！祝你使用愉快！