shadcn/ui 组件库使用指南

shadcn/ui 是一个基于 Radix UI 和 Tailwind CSS 的组件库，提供了高质量的可访问组件。

## 安装和配置

### 初始化项目
``bash
npx shadcn-ui@latest init
`

### 添加组件
`bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
`

## 组件使用

### Button 组件
`tsx
import { Button } from "@/components/ui/button";

export function MyComponent() {
return (

默认按钮
轮廓按钮
幽灵按钮

);
}
`

### Card 组件
`tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function ArticleCard() {
return (


文章标题

文章内容...

);
}
`

## 自定义主题

### 配置颜色
`css
:root {
--primary: 222.2 84% 4.9%;
--primary-foreground: 210 40% 98%;
}
``

## 最佳实践

1. 组件组合：合理组合多个基础组件
2. 样式覆盖：使用 className 属性自定义样式
3. 类型安全：充分利用 TypeScript 类型定义
4. 可访问性：保持组件的可访问性特性

## 总结

shadcn/ui 为现代 React 应用提供了强大的组件基础，合理使用可以大大提高开发效率。