Shadcn/ui 组件库教程

Shadcn/ui 是一个基于 Radix UI 和 Tailwind CSS 构建的可复用组件库，提供高度可定制和无障碍的 UI 组件。

安装和配置

前提条件

• React 项目
• Tailwind CSS
• Next.js（推荐）

安装命令

npx shadcn-ui@latest init

配置文件

安装过程会创建 components.json 配置文件：

{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

添加组件

使用 CLI 添加组件：

npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add dropdown-menu

常用组件

按钮组件

import { Button } from "@/components/ui/button"

function Example() {
  return (
    <div>
      <Button>默认按钮</Button>
      <Button variant="outline">轮廓按钮</Button>
      <Button variant="destructive">危险按钮</Button>
    </div>
  )
}

对话框组件

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger>打开对话框</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>确认操作</DialogTitle>
          <DialogDescription>
            你确定要执行此操作吗？
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

自定义主题

在 tailwind.config.js 中自定义颜色和样式：

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-primary': '#your-color',
      }
    }
  }
}

无障碍特性

• 键盘导航
• ARIA 属性
• 语义化 HTML
• 高对比度支持

性能优化

• 按需加载
• 轻量级组件
• 零运行时依赖
• 服务器组件兼容

最佳实践

1. 遵循设计系统
2. 保持一致性
3. 响应式设计
4. 性能优先

结论

Shadcn/ui 提供了一种现代、灵活的方式来构建高质量的 React 用户界面组件，同时保持了高度的可定制性和性能。