# shadcn/ui 组件模式 ## 概述使用 shadcn/ui、Radix UI 和 Tailwind CSS 构建可访问、可自定义 UI 组件的专家指南。该技能提供了用于实现具有完全可访问性支持的生产就绪组件的综合模式。 ## 目录 * 何时使用 * 快速启动 * 安装和设置 * 项目配置 * 核心组件 * 按钮 * 输入和表单字段 * 带有验证的表格 * 卡 * 对话框（模态） * 选择（下拉） * 片材（滑盖式） * 菜单栏和导航 * 表 * 吐司通知 * 图表 * 高级模式 * 定制 * Next.js 集成 * 最佳实践 * 常用组件组合 ## 何时使用 * 使用shadcn/ui建立一个新项目 * 安装或配置各个组件 * 使用 React Hook Form 和 Zod 验证构建表单 * 创建可访问的 UI 组件（按钮、对话框、下拉列表、工作表） * 使用 Tailwind CSS 自定义组件样式 * 使用shadcn/ui实现设计系统 * 使用 TypeScript 构建 Next.js 应用程序 * 创建复杂的布局和数据显示 ## 说明 1. **初始化项目** : 运行 `npx shadcn@latest init` 来配置 shadcn/ui 2. **安装组件** : 使用 `npx shadcn@latest add ` 添加组件 3. **配置主题** : 在 globals.css 中自定义 CSS 变量以进行主题化 4. **导入组件** : 使用`@/components/ui/`目录中的组件 5. **按需定制** ：直接在项目中修改组件代码 6. **添加表单验证**：将 React Hook Form 与 Zod 模式集成 7. **测试辅助功能**：验证 ARIA 属性和键盘导航 ## 示例 ### 填写并验证表格 “使用客户端” 从“@hookform/resolvers/zod”导入{zodResolver} 从“react-hook-form”导入 { useForm } 从“zod”导入{z} 从“@/components/ui/button”导入{Button} 从“@/components/ui/form”导入{ Form、FormControl、FormField、FormItem、FormLabel、FormMessage } 从“@/components/ui/input”导入{输入} const formSchema = z.object({ 电子邮件: z.string().email("无效电子邮件"), 密码: z.string().min(8, "密码必须至少8个字符"), }) 导出函数LoginForm() { const form = useForm>({ 解析器：zodResolver(formSchema), 默认值：{ 电子邮件：“”，密码：“” }， }) 返回（ <表格{...表格}>

( <表单项> 电子邮件 <表单消息/> )} /> <按钮类型=“提交”>登录） } ## 限制和警告 * **不是 NPM 包** ：组件被复制到您的项目中；您拥有该代码 * **注册表安全**：通过“npx shadcn@latest add”安装的组件是从远程注册表（例如“ui.shadcn.com”）获取的；在安装之前始终验证注册表源是否可信，并在生产中使用之前检查生成的组件代码 * **自定义注册表验证** ：在`components.json`中配置自定义注册表时，仅使用受信任的私有注册表URL；永远不要指向不受信任的第三方注册表端点，因为它们可能会注入恶意代码 * **客户端组件**：大多数组件需要“使用客户端”指令 * **Radix 依赖项** ：确保安装所有 @radix-ui 软件包 * **需要 Tailwind** ：组件依赖于 Tailwind CSS 实用程序 * **TypeScript** ：专为 TypeScript 项目设计；包括类型定义 * **路径别名** : 在 tsconfig.json 中配置 @alias 进行导入 * **深色模式** ：使用 CSS 变量或类策略设置深色模式 ## 快速入门对于新项目，请使用自动化设置： # 使用 shadcn/ui 创建 Next.js 项目 npx create-next-app@latest my-app --typescript --tailwind --eslint --app cd 我的应用程序 npx shadcn@最新 init # 安装必要的组件 npx shadcn@latest 添加按钮输入表单卡对话框选择对于现有项目： # 安装依赖项 npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react # 初始化shadcn/ui npx shadcn@最新 init ##什么是shadcn/ui？ shadcn/ui **不是**传统的组件库或 npm 包。相反： * 它是**可重用组件的集合**，您可以将其复制到您的项目中 * 组件**由您定制** \- 您拥有代码 * 使用 **Radix UI** 原语构建以实现可访问性 * 使用 **Tailwind CSS** 实用程序进行样式设置 * 包括 CLI 工具，可轻松安装组件 ## 安装和设置 ### 初始设置 # 在项目中初始化 shadcn/ui npx shadcn@最新 init 在设置过程中，您将配置： * TypeScript 或 JavaScript * 风格（默认、纽约等） * 基色主题 * CSS 变量或 Tailwind CSS 类 * 组件安装路径 ### 安装各个组件 # 安装单个组件 npx shadcn@最新添加按钮 # 安装多个组件 npx shadcn@最新添加按钮输入表单 # 安装所有组件 npx shadcn@最新添加--全部 ### 手动安装如果您更喜欢手动设置： # 安装特定组件的依赖项 npm install @radix-ui/react-slot # 从ui.shadcn.com复制组件代码 # 放置在 src/components/ui/ 中 ## 项目配置 ### 所需的依赖项 { “依赖项”：{ "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "类方差权威": "^0.7.0", "clsx": "^2.0.0", "lucide-react": "^0.294.0", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7" } } ### TSConfig 配置 { “编译器选项”：{ “目标”：“es5”， “lib”：[“dom”，“dom.iterable”，“es6”]， “allowJs”：正确， “skipLibCheck”：正确， “严格”：真实， “forceConsistentCasingInFileNames”：true， “noEmit”：正确， “esModuleInterop”：正确， “模块”：“esnext”， "moduleResolution": "节点", “resolveJsonModule”：true， “isolatedModules”：正确， "jsx": "保留", “增量”：正确， “插件”：[ { “名称”：“下一个” } ], "baseUrl": ".", “路径”：{ "@/components/*": ["./src/components/*"], "@/lib/*": ["./src/lib/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], “排除”：[“node_modules”] } ### 顺风配置 // tailwind.config.js /** @type {import('tailwindcss').Config} */ 模块. 导出 = { 黑暗模式：[“类”]，内容：[ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], 前缀：“”，主题：{ 容器：{ 中心：真实，填充：“2rem”，屏幕：{ "2xl": "1400 像素", }, }, 扩展：{ 颜色：{ 边框：“hsl(var(--border))”，输入：“hsl（var（--输入））”，环：“hsl(var(--ring))”，背景：“hsl(var(--background))”，前景：“hsl(var(--foreground))”，主要：{ 默认值：“hsl(var(--primary))”，前景：“hsl(var(--primary-foreground))”， }, 次要：{ 默认值：“hsl(var(--secondary))”，前景：“hsl(var(--secondary-foreground))”， }, 破坏性：{ 默认值：“hsl（var（--破坏性））”，前景：“hsl（var（--破坏性前景））”， }, 静音：{ 默认值：“hsl(var(--muted))”，前景：“hsl(var(--muted-foreground))”， }, 口音：{ 默认值：“hsl(var(--accent))”，前景：“hsl(var(--accent-foreground))”， }, 弹出窗口：{ 默认值：“hsl(var(--popover))”，前景：“hsl(var(--popover-foreground))”， }, 卡：{ 默认值：“hsl(var(--card))”，前景：“hsl(var(--card-foreground))”， }, }, 边框半径：{ lg: "var(--半径)", md: "calc(var(--radius) - 2px)", sm: "计算(var(--radius) - 4px)", }, 关键帧：{ “手风琴向下”：{ 来自：{高度：“0”}，到：{高度：“var（--radix-accordion-content-height）”}， }, “手风琴向上”：{ 来自: { height: "var(--radix-accordion-content-height)" }, 到：{高度：“0”}， }, }, 动画：{ "accordion-down": "accordion-down 0.2s 缓出", "accordion-up": "accordion-up 0.2s 缓出", }, }, }, 插件: [require("tailwindcss-animate")], } ### CSS 变量 (globals.css) @tailwind基地； @tailwind组件； @tailwind实用程序； @层基础{ ：根{ --背景：0 0% 100%； --前景：222.2 84% 4.9%； --卡：0 0% 100%； --卡前景：222.2 84% 4.9%； --弹出窗口：0 0% 100%； --popover-前景：222.2 84% 4.9%； ——小学：222.2 47.4% 11.2%； --主前景：210 40% 98%； ——中学：210 40% 96.1%； --次要前景：222.2 47.4% 11.2%； --静音：210 40% 96.1%； --静音前景：215.4 16.3% 46.9%； --口音：210 40% 96.1%； --重音前景：222.2 47.4% 11.2%； --破坏性：0 84.2% 60.2%； --破坏性前景：210 40% 98%； --边界：214.3 31.8% 91.4%； --输入：214.3 31.8% 91.4%； --环：222.2 84% 4.9%； --半径：0.5rem； } .暗{ --背景：222.2 84% 4.9%； --前景：210 40% 98%； ——卡：222.2 84% 4.9%； --卡前景：210 40% 98%； --弹出窗口：222.2 84% 4.9%； --popover-前景：210 40% 98%； --初级：210 40% 98%； --主前景：222.2 47.4% 11.2%； ——中学：217.2 32.6% 17.5%； --次要前景：210 40% 98%； --静音：217.2 32.6% 17.5%； --静音前景：215 20.2% 65.1%； --口音：217.2 32.6% 17.5%； --重音前景：210 40% 98%； --破坏性：0 62.8% 30.6%； --破坏性前景：210 40% 98%； --边界：217.2 32.6% 17.5%； --输入：217.2 32.6% 17.5%； --环：212.7 26.8% 83.9%； } } @层基础{ * { @应用边框-边框； } 身体{ @apply bg-背景文本-前景； } } ## 核心组件 ### 按钮组件安装： npx shadcn@最新添加按钮基本用法：从“@/components/ui/button”导入{Button}；导出函数 ButtonDemo() { return ; } 按钮变体：从“@/components/ui/button”导入{Button}；导出函数 ButtonVariants() { 返回（

<按钮变体=“默认”>默认 <按钮变体=“破坏性”>破坏性 <按钮变体=“大纲”>大纲 <按钮变体=“次要”>次要 <按钮变体=“幽灵”>幽灵 <按钮变体=“链接”>链接

）； } 按钮尺寸：

<按钮大小=“默认”>默认 <按钮尺寸=“sm”>小 <按钮大小=“lg”>大 <按钮大小=“图标”> <图标类名=“h-4 w-4”/>

加载状态：从“@/components/ui/button”导入{Button}；从“lucide-react”导入{Loader2}；导出函数 ButtonLoading() { 返回（ <按钮禁用> 请稍候）； } ### 输入和表单字段 #### 输入组件安装： npx shadcn@最新添加输入基本输入：从“@/components/ui/input”导入{输入}；导出函数InputDemo() { 返回<输入类型=“电子邮件”占位符=“电子邮件”/>； } 带标签输入：从“@/components/ui/input”导入{输入}；从“@/components/ui/label”导入{标签}；导出函数InputWithLabel() { 返回（

<标签 htmlFor="电子邮件">电子邮件 <输入类型=“电子邮件”id=“电子邮件”占位符=“电子邮件”/>

）； } 通过按钮输入：从“@/components/ui/button”导入{Button}；从“@/components/ui/input”导入{输入}；导出函数InputWithButton() { 返回（

<输入类型=“电子邮件”占位符=“电子邮件”/>

）； } ### 带有验证的表单安装： npx shadcn@最新添加表单这将安装 React Hook Form、Zod 和表单组件。完整表格示例： “使用客户端” 从“@hookform/resolvers/zod”导入{zodResolver} 从“react-hook-form”导入 { useForm } 从“zod”导入*作为z 从“@/components/ui/button”导入{Button} 导入{ 形式，表单控件，表格描述，表单字段，表单项，表单标签，表单消息，来自“@/components/ui/form” 从“@/components/ui/input”导入{输入} 从“@/components/ui/use-toast”导入{toast} const formSchema = z.object({ 用户名: z.string().min(2, { message: "用户名必须至少有 2 个字符。", }), 电子邮件：z.string().电子邮件({ message: "请输入有效的电子邮件地址。", }), }) 导出函数 ProfileForm() { const form = useForm>({ 解析器：zodResolver(formSchema), 默认值：{ 用户名：“”，电子邮件：“”， }, }) 函数 onSubmit(值: z.infer) { 吐司（{ title: "您提交了以下值：", 描述：（

              {JSON.stringify(values, null, 2)}
            
          ),
        })
      }
    
      返回（
        <表格{...表格}>
          
            <表单域
              控制={form.control}
              名称=“用户名”
              渲染={({字段})=>(
                <表单项>
                  用户名
                  <表单控件>
                    <输入占位符=“shadcn”{...字段} />
                  
                  <表单描述>
                    这是您的公开显示名称。
                  
                  <表单消息/>
                
              )}
            />
            
            <表单域
              控制={form.control}
              姓名=“电子邮件”
              渲染={({字段})=>(
                <表单项>
                  电子邮件
                  <表单控件>
                    <输入类型=“电子邮件”占位符=“you@example.com”{...字段} />
                  
                  <表单消息/>
                
              )}
            />
            
            <按钮类型=“提交”>提交
          
        
      ）
    }
    

### 卡组件

安装：
    
    
    npx shadcn@最新添加卡
    

基本卡：
    
    
    导入{
      卡，
      卡片内容，
      卡说明，
      卡页脚，
      卡头，
      卡片标题，
    } 来自“@/components/ui/card”
    
    导出函数 CardDemo() {
      返回（
        <卡片>
          <卡片标题>
            卡片标题
            卡说明
          
          <卡片内容>
            卡片内容
          
          <卡页脚>
            卡片页脚
          
        
      ）
    }

卡与表格：
    
    
    从“@/components/ui/button”导入{Button}
    导入{
      卡，
      卡片内容，
      卡说明，
      卡页脚，
      卡头，
      卡片标题，
    } 来自“@/components/ui/card”
    从“@/components/ui/input”导入{输入}
    从“@/components/ui/label”导入{标签}
    
    导出函数 CardWithForm() {
      返回（
        <卡类名称=“w-[350px]”>
          <卡片标题>
            创建项目
            一键部署新项目。
          
          <卡片内容>
            <表格>
              
                
                  <标签 htmlFor="name">名称
                  
                
              
            
          
          
            <按钮变体=“大纲”>取消
            <按钮>部署
          
        
      ）
    }
    

### 对话框（模态）组件

安装：
    
    
    npx shadcn@最新添加对话框
    

基本对话框：
    
    
    从“@/components/ui/button”导入{Button}
    导入{
      对话，
      对话内容，
      对话框描述，
      对话框页脚，
      对话框标题，
      对话框标题，
      对话触发器，
    来自“@/components/ui/dialog”
    
    导出函数 DialogDemo() {
      返回（
        <对话框>
          
            打开对话框
          
          
            <对话框标题>
              编辑个人资料
              <对话框描述>
                在此处更改您的个人资料。完成后单击“保存”。
              
            
            
              
                <标签 htmlFor="name" className="text-right">
                  名称
                
                
              
            
            <对话框页脚>
              
            
          
        
      ）
    }
    

### 片材（滑盖式）组件

安装：
    
    
    npx shadcn@最新添加表

基本表：
    
    
    从“@/components/ui/button”导入{Button}
    导入{
      板材、
      工作表内容，
      表描述，
      表头，
      工作表标题，
      表触发器，
    来自“@/components/ui/sheet”
    
    导出函数 SheetDemo() {
      返回（
        <表>
          
            打开工作表
          
          <表内容>
            <表头>
              编辑个人资料
              <表描述>
                在此处更改您的个人资料。完成后单击“保存”。
              
            
            
              
                <标签 htmlFor="name" className="text-right">
                  名称
                
                
              
              
                
                  用户名
                
                <输入id =“用户名”值=“@peduarte”className =“col-span-3”/>
              
            
          
        
      ）
    }
    

侧面放置的板材：
    
    
    <表>
      
        打开右侧工作表
      
      
        <表头>
          设置
          <表描述>
            在此配置您的应用程序设置。
          
        
        {/* 设置内容 */}
      
    
    

### 菜单栏和导航

#### 菜单栏组件

安装：
    
    
    npx shadcn@最新添加菜单栏
    

基本菜单栏：
    
    
    导入{
      菜单栏，
      菜单栏内容，
      菜单栏项目，
      菜单栏菜单,
      菜单栏分隔符，
      菜单栏快捷方式，
      菜单栏子，
      菜单栏子内容，
      菜单栏子触发器，
      菜单栏触发器，
    来自“@/components/ui/menubar”
    
    导出函数 MenubarDemo() {
      返回（
        <菜单栏>
          <菜单栏菜单>
            文件
            <菜单栏内容>
              <菜单栏项>
                新标签 ⌘T
              
              <菜单栏项>
                新窗口 ⌘N
              
              <菜单栏分隔符/>
              分享
              <菜单栏分隔符/>
              打印
            
          
          <菜单栏菜单>
            编辑
            <菜单栏内容>
              <菜单栏项>
                撤消 ⌘Z
              
              <菜单栏项>
                重做 ⌘Y
              
              <菜单栏分隔符/>
              <菜单栏子>
                查找
                <菜单栏子内容>
                  搜索网络
                  查找...
                  查找下一个
                  查找上一个
                
              
            
          
        
      ）
    }
    

### 选择（下拉）组件

安装：
    
    
    npx shadcn@最新添加选择

基本选择：
    
    
    导入{
      选择，
      选择内容，
      选择项目，
      选择触发器，
      选择值，
    } 来自“@/components/ui/select”
    
    导出函数 SelectDemo() {
      返回（
        <选择>
          
            
          
          <选择内容>
            苹果
            香蕉
            橙色
          
        
      ）
    }
    

在表格中选择：
    
    
    <表单域
      控制={form.control}
      名称=“角色”
      渲染={({字段})=>(
        <表单项>
          角色
          <选择 onValueChange={field.onChange} defaultValue={field.value}>
            <表单控件>
              <选择触发器>
                
              
            
            <选择内容>
              管理员
              用户
              访客
            
          
          <表单消息/>
        
      )}
    />
    

### Toast 通知

安装：
    
    
    npx shadcn@最新添加 toast
    

在根布局中设置 toast 提供程序：
    
    
    从“@/components/ui/toaster”导入{Toaster}
    
    导出默认函数 RootLayout({ Children }) {
      返回（
        
          <正文>
            {孩子}
            <烤面包机/>
          
        
      ）
    }
    

使用吐司：
    
    
    从“@/components/ui/use-toast”导入{useToast}
    从“@/components/ui/button”导入{Button}
    
    导出函数 ToastDemo() {
      const { 吐司 } = useToast()
    
      返回（
        <按钮
          onClick={() => {
            吐司（{
              title: "预定：赶上",
              描述：“2023 年 2 月 10 日星期五下午 5:57”，
            })
          }}
        >
          显示吐司
        
      ）
    }
    

吐司变种：
    
    
    // 成功
    吐司（{
      标题：“成功”，
      描述：“您的更改已保存。”,
    })
    
    // 错误
    吐司（{
      变体：“破坏性”，
      标题：“错误”，
      描述：“出了点问题。”,
    })
    
    // 带动作
    吐司（{
      title: “呃哦！出了点问题。”,
      描述：“您的请求有问题。”,
      操作：再试一次，
    })
    

### 表组件

安装：
    
    
    npx shadcn@最新添加表

基本表：
    
    
    导入{
      表，
      桌体，
      表格标题，
      表格单元格，
      桌头，
      表头，
      表行，
    } 来自“@/components/ui/table”
    
    常量发票 = [
      { 发票: "INV001", 状态: "已付款", 方法: "信用卡", 金额: "$250.00" },
      { 发票：“INV002”，状态：“待处理”，方法：“PayPal”，金额：“$150.00”}，
    ]
    
    导出函数TableDemo() {
      返回（
        <表>
          您最近的发票列表。
          <表头>
            <表行>
              发票
              状态
              方法
              金额
            
          
          <表体>
            {发票.map((发票) => (
              
                {发票.发票}
                {发票.status}
                {发票.method}
                {发票.金额}
              
            ))}
          
        
      ）
    }
    

### 图表组件

安装：
    
    
    npx shadcn@最新添加图表
    

shadcn/ui 中的图表组件基于 **Recharts** \ - 提供对所有 Recharts 功能的直接访问，并具有一致的主题和样式。

#### ChartContainer 和 ChartConfig

`ChartContainer` 包装您的 Recharts 组件并接受主题化的 `config` 属性：
    
    
    从“recharts”导入 { Bar, BarChart, CartesianGrid, XAxis, YAxis }
    从“@/components/ui/chart”导入 { ChartContainer, ChartTooltipContent }
    
    常量图表配置 = {
      桌面：{
        标签：“桌面”，
        颜色：“var(--chart-1)”，
      },
      手机：{
        标签：“移动”，
        颜色：“var(--chart-2)”，
      },
    } 满足 import("@/components/ui/chart").ChartConfig
    
    常量图表数据 = [
      { 月份：“一月”，桌面设备：186，移动设备：80 }，
      { 月份：“二月”，桌面版：305，移动版：200 }，
      { 月份：“三月”，桌面设备：237，移动设备：120 }，
    ]
    
    导出函数 BarChartDemo() {
      返回（
        
          <条形图数据={chartData}>
            
             value.slice(0, 3)}
            />
            <酒吧
              dataKey="桌面"
              填充=“var（--颜色桌面）”
              半径={4}
            />
            <酒吧
              数据键=“移动”
              填充=“var（--颜色移动）”
              半径={4}
            />
            } />
          
        
      ）
    }
    

#### 具有自定义颜色的 ChartConfig

您可以直接在配置中定义自定义颜色：
    
    
    常量图表配置 = {
      访客：{
        标签：“访客”，
        color: "#2563eb", // 自定义十六进制颜色
        主题：{
          光：“#2563eb”，
          黑暗：“#60a5fa”，
        },
      },
      销售：{
        标签：“销售”，
        color: "var(--chart-1)", // CSS 变量
        主题：{
          光：“oklch（0.646 0.222 41.116）”，
          黑暗：“oklch（0.696 0.182 281.41）”，
        },
      },
    } 满足 import("@/components/ui/chart").ChartConfig
    

#### 图表的 CSS 变量

将图表颜色变量添加到“globals.css”中：
    
    
    @层基础{
      ：根{
        /* 图表颜色 */
        --chart-1: oklch(0.646 0.222 41.116);
        --chart-2: oklch(0.6 0.118 184.704);
        --chart-3: oklch(0.546 0.198 38.228);
        --chart-4: oklch(0.596 0.151 343.253);
        --chart-5: oklch(0.546 0.158 49.157);
      }
    
      .暗{
        --chart-1: oklch(0.488 0.243 264.376);
        --chart-2: oklch(0.696 0.17 162.48);
        --chart-3: oklch(0.698 0.141 24.311);
        --chart-4: oklch(0.676 0.172 171.196);
        --chart-5: oklch(0.578 0.192 302.85);
      }
    }
    

#### 折线图示例
    
    
    从“recharts”导入 { Line、LineChart、CartesianGrid、XAxis、YAxis }
    从“@/components/ui/chart”导入 { ChartContainer, ChartTooltipContent }
    
    常量图表配置 = {
      价格：{
        标签：“价格”，
        颜色：“var(--chart-1)”，
      },
    } 满足 import("@/components/ui/chart").ChartConfig
    
    常量图表数据 = [
      { 月份：“一月”，价格：186 }，
      { 月份：“二月”，价格：305 }，
      { 月份：“三月”，价格：237 }，
      { 月份：“四月”，价格：203 }，
      { 月份：“五月”，价格：276 }，
    ]
    
    导出函数 LineChartDemo() {
      返回（
        
          <折线图数据={chartData}>
            
            
             `$${value}`} />
            <线
              数据键=“价格”
              描边=“var（--颜色价格）”
              笔划宽度={2}
              点={假}
            />
            } />
          
        
      ）
    }
    

#### 面积图示例
    
    
    从“recharts”导入 { Area, AreaChart, XAxis, YAxis }
    从“@/components/ui/chart”导入 { ChartContainer、ChartLegend、ChartLegendContent、ChartTooltipContent }
    
    常量图表配置 = {
      桌面: { 标签: "桌面", 颜色: "var(--chart-1)" },
      移动设备：{ 标签：“移动设备”，颜色：“var(--chart-2)” },
    } 满足 import("@/components/ui/chart").ChartConfig
    
    导出函数 AreaChartDemo() {
      返回（
        
          <面积图数据={chartData}>
            
            
            <面积
              dataKey="桌面"
              填充=“var（--颜色桌面）”
              描边=“var(--color-desktop)”
              填充不透明度={0.3}
            />
            <面积
              数据键=“移动”
              填充=“var（--颜色移动）”
              笔画=“var（--color-mobile）”
              填充不透明度={0.3}
            />
            } />
            } />
          
        
      ）
    }

#### 饼图示例
    
    
    从“recharts”导入 { Pie, PieChart }
    从“@/components/ui/chart”导入 { ChartContainer、ChartLegend、ChartLegendContent、ChartTooltipContent }
    
    常量图表配置 = {
      chrome: { 标签: "Chrome", 颜色: "var(--chart-1)" },
      safari: { 标签: "Safari", 颜色: "var(--chart-2)" },
      火狐：{ 标签：“火狐”，颜色：“var(--chart-3)” },
    } 满足 import("@/components/ui/chart").ChartConfig
    
    const 饼数据 = [
      { 浏览器：“Chrome”，访问者：275，填充：“var(--color-chrome)” },
      { 浏览器：“Safari”，访客：200，填充：“var(--color-safari)” },
      { 浏览器: "Firefox", 访问者: 187, 填充: "var(--color-firefox)" },
    ]
    
    导出函数 PieChartDemo() {
      返回（
        
          <饼图>
            <馅饼
              数据={pieData}
              数据键=“访客”
              nameKey =“浏览器”
              CX=“50%”
              赛=“50%”
              外半径={80}
            />
            } />
            } />
          
        
      ）
    }
    

#### ChartTooltipContent 属性

道具|类型 |默认 |描述  
---|---|---|---  
`labelKey` |字符串| “标签” |工具提示标签的键  
`nameKey` |字符串| “姓名” |工具提示名称的键  
`指标` | “点”| “线”| “虚线”| “点”|指标样式  
`隐藏标签` |布尔 |假 |隐藏标签  
`隐藏指示器` |布尔 |假 |隐藏指示器  
  
#### 辅助功能

启用键盘导航和屏幕阅读器支持：
    
    
    ...
    

这增加了：

  * 键盘方向键导航
  * 图表元素的 ARIA 标签
  * 数据值的屏幕阅读器公告



## 定制

### 使用 CSS 变量进行主题化

shadcn/ui 使用 CSS 变量进行主题化。在`globals.css`中配置：
    
    
    @层基础{
      ：根{
        --背景：0 0% 100%；
        --前景：222.2 84% 4.9%；
        ——小学：222.2 47.4% 11.2%；
        --主前景：210 40% 98%；
        ——中学：210 40% 96.1%；
        --次要前景：222.2 47.4% 11.2%；
        --静音：210 40% 96.1%；
        --静音前景：215.4 16.3% 46.9%；
        --口音：210 40% 96.1%；
        --重音前景：222.2 47.4% 11.2%；
        --破坏性：0 84.2% 60.2%；
        --破坏性前景：210 40% 98%；
        --边界：214.3 31.8% 91.4%；
        --输入：214.3 31.8% 91.4%；
        --环：222.2 84% 4.9%；
        --半径：0.5rem；
      }
    
      .暗{
        --背景：222.2 84% 4.9%；
        --前景：210 40% 98%；
        --初级：210 40% 98%；
        --主前景：222.2 47.4% 11.2%；
        /* ...其他深色模式变量 */
      }
    }
    

### 自定义组件

由于您拥有代码，因此可以直接自定义：
    
    
    // 组件/ui/button.tsx
    从“react”导入 * as React
    从“@radix-ui/react-slot”导入{槽}
    从“类方差权威”导入 { cva, type VariantProps }
    从“@/lib/utils”导入 { cn }
    
    const 按钮变体 = cva(
      “内联-flex项目-中心对齐-中心圆角-md文本-sm字体-中过渡颜色”，
      {
        变体：{
          变体：{
            默认值：“bg-primary 文本-primary-前景悬停：bg-primary/90”，
            破坏性：“bg-破坏性文本-破坏性-前景悬停：bg-破坏性/ 90”，
            大纲：“边框边框-输入bg-背景悬停：bg-accent”，
            // 添加自定义变体
            自定义：“bg-gradient-to-r from-purple-500 to-pink-500 text-white”，
          },
          尺寸：{
            默认值：“h-10 px-4 py-2”，
            sm: "h-9 圆角-md px-3",
            lg: "h-11 圆角-md px-8",
            // 添加自定义尺寸
            xl: "h-14 rounded-md px-10 text-lg",
          },
        },
        默认变体：{
          变体：“默认”，
          大小：“默认”，
        },
      }
    ）
    
    导出接口ButtonProps
      扩展 React.ButtonHTMLAttributes,
        VariantProps {
      asChild?: 布尔值
    }
    
    const Button = React.forwardRef(
      ({ 类名, 变体, 大小, asChild = false, ...props }, ref) => {
        const Comp = asChild ？插槽：“按钮”
        返回（
          <比较
            className={cn(buttonVariants({ 变体, 大小, className }))}
            参考={参考}
            {...道具}
          />
        ）
      }
    ）
    Button.displayName = "按钮"
    
    导出 { 按钮，按钮变量 }
    

## Next.js 集成

### 应用程序路由器设置

对于带有 App Router 的 Next.js 13+，确保组件使用“use client”指令：
    
    
    // src/components/ui/button.tsx
    “使用客户端”
    
    从“react”导入 * as React
    从“@radix-ui/react-slot”导入{槽}
    从“类方差权威”导入 { cva, type VariantProps }
    从“@/lib/utils”导入 { cn }
    
    // ... 组件的其余部分
    

### 布局集成

将 Toaster 添加到您的根布局中：
    
    
    // 应用程序/layout.tsx
    从“@/components/ui/toaster”导入{Toaster}
    导入“./globals.css”
    
    导出默认函数 RootLayout({
      孩子们，
    }：{
      子级：React.ReactNode
    }) {
      返回（
        
          
            {孩子}
            <烤面包机/>
          
        
      ）
    }
    

### 服务器组件

在服务器组件中使用 shadcn/ui 组件时，将它们包装在客户端组件中：
    
    
    // 应用程序/仪表板/page.tsx
    从“@/components/ui/card”导入{ Card、CardContent、CardHeader、CardTitle }
    从“@/components/ui/button-client”导入 { ButtonClient }
    
    导出默认函数 DashboardPage() {
      返回（
        
          <卡片>
            <卡片标题>
              仪表板
            
            <卡片内容>
              交互式按钮
            
          
        
      ）
    }
    
    
    
    // src/components/ui/button-client.tsx
    “使用客户端”
    
    从“./button”导入{Button}
    
    导出函数 ButtonClient(props: React.ComponentProps) {
      返回 
          
        
      
    
    

## 参考文献

  * 官方文档：
  * Radix UI：
  * React Hook 表单：
  *佐德：
  * Tailwind CSS：
  * 示例：

沙德恩用户界面

包含技能