📚 shadcn/ui 所有组件列表

📋 当前可用组件（持续更新中）

基础组件

npx shadcn@latest add button
npx shadcn@latest add badge
npx shadcn@latest add avatar
npx shadcn@latest add icon

布局组件

npx shadcn@latest add card
npx shadcn@latest add sheet
npx shadcn@latest add accordion
npx shadcn@latest add tabs
npx shadcn@latest add separator
npx shadcn@latest add aspect-ratio

导航组件

npx shadcn@latest add navigation-menu
npx shadcn@latest add breadcrumb
npx shadcn@latest add pagination
npx shadcn@latest add sidebar

表单组件

npx shadcn@latest add form
npx shadcn@latest add input
npx shadcn@latest add textarea
npx shadcn@latest add label
npx shadcn@latest add button
npx shadcn@latest add select
npx shadcn@latest add checkbox
npx shadcn@latest add radio-group
npx shadcn@latest add switch
npx shadcn@latest add slider
npx shadcn@latest add toggle
npx shadcn@latest add toggle-group
npx shadcn@latest add combobox

数据展示组件

npx shadcn@latest add table
npx shadcn@latest add data-table
npx shadcn@latest add chart
npx shadcn@latest add calendar
npx shadcn@latest add progress
npx shadcn@latest add skeleton
npx shadcn@latest add timeline

反馈组件

npx shadcn@latest add alert
npx shadcn@latest add alert-dialog
npx shadcn@latest add dialog
npx shadcn@latest add toast
npx shadcn@latest add tooltip
npx shadcn@latest add popover
npx shadcn@latest add hover-card
npx shadcn@latest add context-menu
npx shadcn@latest add dropdown-menu
npx shadcn@latest add command
npx shadcn@latest add menubar

多媒体组件

npx shadcn@latest add image

其他组件

npx shadcn@latest add collapsible
npx shadcn@latest add scroll-area
npx shadcn@latest add resizable
npx shadcn@latest add carousel

🎯 完整组件列表（按类别）

1. 基础组件

组件	命令	描述
Button	`add button`	按钮组件
Badge	`add badge`	徽章标签
Avatar	`add avatar`	头像组件
Icon	`add icon`	图标组件

2. 布局组件

组件	命令	描述
Card	`add card`	卡片容器
Sheet	`add sheet`	侧边栏面板
Accordion	`add accordion`	手风琴组件
Tabs	`add tabs`	标签页组件
Separator	`add separator`	分隔线
Aspect Ratio	`add aspect-ratio`	宽高比容器

3. 导航组件

组件	命令	描述
Navigation Menu	`add navigation-menu`	导航菜单
Breadcrumb	`add breadcrumb`	面包屑导航
Pagination	`add pagination`	分页组件
Sidebar	`add sidebar`	侧边栏

4. 表单组件

组件	命令	描述
Form	`add form`	表单组件（React Hook Form）
Input	`add input`	输入框
Textarea	`add textarea`	文本域
Label	`add label`	表单标签
Select	`add select`	选择器
Checkbox	`add checkbox`	复选框
Radio Group	`add radio-group`	单选框组
Switch	`add switch`	开关
Slider	`add slider`	滑块
Toggle	`add toggle`	切换按钮
Toggle Group	`add toggle-group`	切换按钮组
Combobox	`add combobox`	组合框

5. 数据展示组件

组件	命令	描述
Table	`add table`	表格
Data Table	`add data-table`	数据表格（TanStack Table）
Chart	`add chart`	图表组件
Calendar	`add calendar`	日历
Progress	`add progress`	进度条
Skeleton	`add skeleton`	骨架屏
Timeline	`add timeline`	时间轴

6. 反馈组件

组件	命令	描述
Alert	`add alert`	警告提示
Alert Dialog	`add alert-dialog`	确认对话框
Dialog	`add dialog`	对话框
Toast	`add toast`	消息提示
Tooltip	`add tooltip`	工具提示
Popover	`add popover`	弹出框
Hover Card	`add hover-card`	悬停卡片
Context Menu	`add context-menu`	右键菜单
Dropdown Menu	`add dropdown-menu`	下拉菜单
Command	`add command`	命令面板（类似 Spotlight）
Menubar	`add menubar`	菜单栏

7. 多媒体组件

组件	命令	描述
Image	`add image`	图片组件

8. 其他组件

组件	命令	描述
Collapsible	`add collapsible`	可折叠内容
Scroll Area	`add scroll-area`	滚动区域
Resizable	`add resizable`	可调整大小
Carousel	`add carousel`	轮播图

💡 实际使用示例

完整表单示例

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

function LoginForm() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>登录</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">邮箱</Label>
          <Input id="email" type="email" placeholder="请输入邮箱" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">密码</Label>
          <Input id="password" type="password" placeholder="请输入密码" />
        </div>
        <Button className="w-full">登录</Button>
      </CardContent>
    </Card>
  )
}

数据表格示例

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

function UserTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>姓名</TableHead>
          <TableHead>邮箱</TableHead>
          <TableHead>状态</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>张三</TableCell>
          <TableCell>zhangsan@example.com</TableCell>
          <TableCell>活跃</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

交互组件示例

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

function UserDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>打开对话框</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>用户信息</DialogTitle>
          <DialogDescription>查看和编辑用户详细信息</DialogDescription>
        </DialogHeader>
        {/* 对话框内容 */}
      </DialogContent>
    </Dialog>
  )
}

🚀 批量安装命令

安装常用组件组

# 基础组件组
npx shadcn@latest add button badge avatar card

# 表单组件组
npx shadcn@latest add form input label select checkbox

# 布局组件组
npx shadcn@latest add table dialog dropdown-menu tooltip

# 完整项目组件组
npx shadcn@latest add button input label card table dialog dropdown-menu form select

查看所有可用组件

# 查看当前所有可用的组件
npx shadcn@latest add

# 输出示例：
# Available components:
# ○ accordion
# ○ alert
# ○ alert-dialog
# ○ aspect-ratio
# ○ avatar
# ○ badge
# ○ breadcrumb
# ○ button
# ○ calendar
# ○ card
# ○ carousel
# ○ chart
# ○ checkbox
# ○ collapsible
# ○ combobox
# ○ command
# ○ context-menu
# ○ data-table
# ○ dialog
# ○ dropdown-menu
# ○ form
# ○ hover-card
# ○ icon
# ○ image
# ○ input
# ○ label
# ○ menubar
# ○ navigation-menu
# ○ pagination
# ○ popover
# ○ progress
# ○ radio-group
# ○ resizable
# ○ scroll-area
# ○ select
# ○ separator
# ○ sheet
# ○ sidebar
# ○ skeleton
# ○ slider
# ○ switch
# ○ table
# ○ tabs
# ○ textarea
# ○ timeline
# ○ toggle
# ○ toggle-group
# ○ tooltip

🔧 配置和定制

自定义主题配置

# 初始化时选择配置
npx shadcn@latest init

# 重新配置主题
npx shadcn@latest init --force

组件定制示例

// 定制按钮组件 - 直接修改源码
// src/components/ui/button.tsx
import * as React from "react"
import { cn } from "@/lib/utils"

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
  size?: "default" | "sm" | "lg" | "icon"
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "default", …props }, ref) => {
    return (
      <button
        className={cn(
          "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
          {
            "bg-primary text-primary-foreground hover:bg-primary/90": variant === "default",
            "bg-destructive text-destructive-foreground hover:bg-destructive/90": variant === "destructive",
            "border border-input hover:bg-accent hover:text-accent-foreground": variant === "outline",
            "bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
            "hover:bg-accent hover:text-accent-foreground": variant === "ghost",
            "underline-offset-4 hover:underline text-primary": variant === "link",
          },
          {
            "h-10 py-2 px-4": size === "default",
            "h-9 px-3 rounded-md": size === "sm",
            "h-11 px-8 rounded-md": size === "lg",
            "h-10 w-10": size === "icon",
          },
          className
        )}
        ref={ref}
        {…props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button }

📱 响应式设计

移动端适配示例

import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"

function MobileNavigation() {
  return (
    <div className="md:hidden">
      <Sheet>
        <SheetTrigger asChild>
          <Button variant="outline">菜单</Button>
        </SheetTrigger>
        <SheetContent side="left">
          {/* 移动端导航内容 */}
        </SheetContent>
      </Sheet>
    </div>
  )
}

🎨 主题和样式

暗色模式支持

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

function ThemeToggle() {
  return (
    <Button variant="outline" onClick={() => document.documentElement.classList.toggle('dark')}>
      切换主题
    </Button>
  )
}

// 所有组件自动支持暗色模式
// 在 tailwind.config.js 中配置 darkMode: 'class'

🔄 更新组件

更新到最新版本

# 更新所有组件到最新版本
npx shadcn@latest update

# 更新特定组件
npx shadcn@latest update button card

💡 最佳实践建议

按需安装：只安装需要的组件，保持项目轻量
及时更新：定期更新组件以获得最新功能和修复
自定义样式：直接修改组件源码来定制样式
组合使用：结合其他库（如 Framer Motion）增强交互
类型安全：所有组件都提供完整的 TypeScript 类型定义

这个列表会随着 shadcn/ui 的更新而不断增加新组件。建议定期查看官方文档获取最新信息！🚀

📚 shadcn/ui 所有组件列表 ​

📋 当前可用组件（持续更新中） ​

基础组件 ​

布局组件 ​

导航组件 ​

表单组件 ​

数据展示组件 ​

反馈组件 ​

多媒体组件 ​

其他组件 ​

🎯 完整组件列表（按类别） ​

1. 基础组件 ​

2. 布局组件 ​

3. 导航组件 ​

4. 表单组件 ​

5. 数据展示组件 ​

6. 反馈组件 ​

7. 多媒体组件 ​

8. 其他组件 ​

💡 实际使用示例 ​

完整表单示例 ​

数据表格示例 ​

交互组件示例 ​

🚀 批量安装命令 ​

安装常用组件组 ​

查看所有可用组件 ​

🔧 配置和定制 ​

自定义主题配置 ​

组件定制示例 ​

📱 响应式设计 ​

移动端适配示例 ​

🎨 主题和样式 ​

暗色模式支持 ​

🔄 更新组件 ​

更新到最新版本 ​

💡 最佳实践建议 ​

📚 shadcn/ui 所有组件列表

📋 当前可用组件（持续更新中）

基础组件

布局组件

导航组件

表单组件

数据展示组件

反馈组件

多媒体组件

其他组件

🎯 完整组件列表（按类别）

1. 基础组件

2. 布局组件

3. 导航组件

4. 表单组件

5. 数据展示组件

6. 反馈组件

7. 多媒体组件

8. 其他组件

💡 实际使用示例

完整表单示例

数据表格示例

交互组件示例

🚀 批量安装命令

安装常用组件组

查看所有可用组件

🔧 配置和定制

自定义主题配置

组件定制示例

📱 响应式设计

移动端适配示例

🎨 主题和样式

暗色模式支持

🔄 更新组件

更新到最新版本

💡 最佳实践建议