shadcn/ui 入门指南：认识并开始使用这个流行的 UI 库 – wiki基地

作者： /

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 进行构建和样式化。

关键特点总结：

  1. 非传统库： 你不安装一个整体的库，而是选择需要的组件，然后将这些组件的代码文件直接复制到你的项目源代码中。
  2. 基于 Radix UI： 利用 Radix UI 提供了高质量、无障碍且功能强大的无头组件（Headless components），这意味着 Radix UI 负责组件的交互逻辑、状态管理和无障碍特性，但不提供任何样式。
  3. 基于 Tailwind CSS： 使用 Tailwind CSS 来为组件提供样式。Tailwind CSS 是一个原子化 CSS 框架，通过组合实用类来快速构建界面。
  4. 可定制性极强： 由于组件代码直接存在于你的项目中，你可以完全控制和修改每个组件的每一个细节，包括结构、样式和行为。
  5. 自托管： 组件的代码是你项目的一部分，这意味着你不需要担心库的更新会突然破坏你的界面（但你需要自行管理组件的更新）。

这种模式与传统的 UI 库（如 Material UI、Ant Design、Chakra UI）有显著区别。传统库通常作为一个整体包安装，你通过导入组件来使用它们，并通过 props 或自定义主题来修改样式。虽然方便，但在深度定制方面有时会遇到挑战。而 shadcn/ui 则赋予了开发者对组件完全的所有权。

二、为什么选择 shadcn/ui？它带来了哪些优势？

shadcn/ui 之所以能在短时间内如此流行，得益于其独特的设计哲学所带来的诸多优势：

  1. 无与伦比的定制能力： 这是 shadcn/ui 最核心的优势。因为组件代码就在你的项目中，你可以像修改自己的代码一样修改它们。无论是微调样式、更改 DOM 结构，还是添加额外的功能，都易如反掌。你不再需要与复杂的样式覆盖规则或主题配置系统作斗争。
  2. 更小的 Bundle Size： 由于你只复制代码你需要使用的组件，而不是导入一个包含所有组件的庞大库，最终的 JavaScript bundle 体积会更小。
  3. 更好的控制和更少的抽象： 你清楚地知道组件是如何实现的，没有黑盒。这使得调试和理解组件行为变得更加容易。
  4. 基于无障碍设计的 Radix UI： Radix UI 在无障碍性方面做得非常出色，它为复杂的 UI 模式（如模态框、下拉菜单、工具提示等）提供了坚实的基础，确保使用 shadcn/ui 构建的应用具有良好的可访问性。
  5. 拥抱 Tailwind CSS： 如果你的项目已经或计划使用 Tailwind CSS，那么 shadcn/ui 将是一个非常自然的选择。它完美地融入了 Tailwind 的开发工作流程。
  6. 灵活性： 你可以根据自己的需求调整或替换组件使用的技术栈（尽管默认是 Radix + Tailwind，但因为你有代码，理论上可以魔改）。
  7. 良好的起点： shadcn/ui 提供的组件不仅美观，而且代码质量高，结构清晰，是学习如何构建高质量 React 组件的优秀范例。

当然，这种模式也有其挑战，主要是需要开发者自行管理组件的更新。当 shadcn/ui 官方发布组件更新时，你需要通过命令手动拉取更新到你的项目中，这需要一些额外的维护工作。但许多开发者认为，为了获得极致的灵活性和控制力，这种权衡是值得的。

三、开始使用 shadcn/ui：详细的入门指南

了解了 shadcn/ui 的基本概念和优势后，我们现在进入实操环节。本指南将基于一个常见的现代前端项目结构，通常是使用 Next.js 或 Vite 创建的 React 项目，并已经配置了 Tailwind CSS。

准备工作

在开始之前，请确保你的开发环境满足以下条件：

  1. Node.js: 安装了最新 LTS 版本或更新的 Node.js。
  2. 包管理器: 使用 npm、yarn 或 pnpm 中的一种。
  3. React/Next.js/Vite 项目: 已经创建了一个基于 React 的项目。
  4. TypeScript (推荐): shadcn/ui 强烈推荐使用 TypeScript，这能提供更好的开发体验和类型安全。
  5. 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 的一大亮点是其强大的定制能力。你可以通过以下几种方式进行定制：

  1. 使用 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>

  2. 添加 Tailwind CSS 类: 所有组件都接受标准的 className prop，你可以像给任何 HTML 元素或 React 组件添加样式一样，直接添加 Tailwind CSS 类来覆盖或扩展默认样式。

    tsx
    <Button className="bg-green-500 hover:bg-green-600 text-white rounded-full">
    自定义样式按钮
    </Button>
    这里的 Tailwind 类会覆盖组件内部的默认样式。

  3. 直接修改组件源代码: 这是 shadcn/ui 最强大的定制方式。如果你需要进行更深层次的修改，比如改变组件的内部结构、添加新的插槽、修改 Radix UI 原语的 props，或者完全改变其样式逻辑，你可以直接打开组件的 .tsx 文件进行编辑。

    例如，你想在 Button 组件的文本前添加一个图标，并且控制图标的间距，但组件默认没有提供这样的 prop。你可以编辑 src/components/ui/button.tsx 文件，在 Button 组件的实现中添加一个 icon prop，并在 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` 提供极致灵活性的关键。

  4. 通过 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 会提示该组件已存在，并询问你是否要覆盖现有文件。如果你在本地修改过该组件的代码，覆盖会导致你的修改丢失！

更新策略建议：

  1. 没有修改过: 如果你没有对组件的源代码进行过任何修改，直接选择覆盖即可。
  2. 修改过: 如果你修改过组件的源代码，你需要谨慎处理。
    • 手动合并: 最安全但最繁琐的方式是，查看官方更新的代码，然后手动将其变更合并到你修改过的本地文件。
    • 比较工具: 使用代码比较工具 (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 有了全面的认识，并掌握了基本的入门步骤。是时候开始在你自己的项目中尝试并构建令人惊艳的界面了！祝你使用愉快！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部