daisyUI 组件大全：65 个 Tailwind CSS 组件一览

daisyUI 提供了 65 个精心设计的 Tailwind CSS 组件，涵盖从基础表单到复杂布局的各类 UI 需求。每个组件都采用语义化类名，让代码更易读、更易维护。

操作反馈类组件

Accordion 手风琴

用于展示和隐藏内容，同一时间只能展开一个项目。

Alert 警告提示

向用户通知重要事件的信息提示组件。

Badge 徽章

用于显示特定数据的状态标记。

Loading 加载中

显示动画效果表示内容正在加载。

Progress 进度条

展示任务进度或时间流逝的线性进度指示器。

Radial Progress 环形进度

圆形进度指示器，适合展示完成百分比。

Skeleton 骨架屏

用于显示组件加载状态的占位符效果。

Toast 轻提示

固定在页面角落的消息堆叠容器。

Tooltip 文字提示

鼠标悬停时显示提示信息的组件。

数据展示类组件

Avatar 头像

显示个人或企业的缩略图表示。

Card 卡片

用于分组和展示内容的容器组件。

Carousel 轮播

在可滚动区域展示图片或内容。

Chat bubble 聊天气泡

显示对话行及其元数据（头像、名称、时间等）。

Countdown 倒计时

数字 0-999 之间切换时的过渡动画效果。

Diff 对比

并排比较两个项目的差异展示组件。

Hover Gallery 悬停画廊

图片容器，水平悬停时显示其他图片，适合电商产品卡片。

List 列表

垂直布局展示行信息。

Stat 数据统计

在区块中展示数字和数据的组件。

Status 状态指示器

显示元素当前状态（在线、离线、错误等）的小图标。

Table 表格

以表格格式展示数据列表。

Timeline 时间线

按时间顺序展示事件列表。

表单输入类组件

Button 按钮

允许用户执行操作或做出选择。

Checkbox 复选框

用于选择或取消选择值。

File Input 文件输入

上传文件的输入字段。

Radio 单选框

允许用户从一组选项中选择一个。

Range slider 滑块

通过拖动滑块选择值的组件。

Rating 评分

允许用户对某事物进行评分的单选按钮组。

Select 下拉选择

从选项列表中选择值。

Text Input 文本输入

简单的单行文本输入字段。

Textarea 多行文本

允许用户输入多行文本。

Toggle 开关

样式化为开关按钮的复选框。

导航类组件

Breadcrumbs 面包屑

帮助用户在网站中导航的路径指示器。

Dock 底部导航

固定在屏幕底部的导航栏（也称底部导航或底部栏）。

Drawer 抽屉侧边栏

可显示/隐藏左侧或右侧侧边栏的网格布局。

Dropdown 下拉菜单

点击按钮时打开菜单或其他元素。

FAB / Speed Dial 浮动操作按钮

固定在屏幕角落的按钮，点击后显示额外的操作按钮。

Menu 菜单

垂直或水平显示链接列表。

Navbar 导航栏

页面顶部的导航栏。

Pagination 分页

允许用户在相关内容集之间导航的按钮组。

Steps 步骤条

展示流程中步骤列表的组件。

Tabs 标签页

以标签格式显示链接列表。

布局类组件

Collapse 折叠面板

用于展示和隐藏内容的组件（可同时展开多个）。

Divider 分隔线

垂直或水平分隔内容的线条。

Footer 页脚

Hero 首屏大图

显示大框或图片及标题描述的组件。

Join 组合容器

用于分组多个项目的容器，可创建按钮、输入框等的组合效果。

Stack 堆叠

视觉上将元素堆叠在一起的组件。

视觉增强类组件

Hover 3D Card 3D 悬停卡片

为内容添加 3D 悬停效果的包装组件，根据鼠标位置倾斜旋转。

Indicator 指示器

在另一个元素的角落放置元素的标记。

Mask 遮罩

将元素内容裁剪为常见形状的遮罩效果。

Swap 交换

使用复选框或类名切换两个元素可见性的组件。

Text Rotate 文字旋转

最多可显示 6 行文字，以无限循环动画逐行展示。

模拟器类组件

Browser mockup 浏览器模拟器

看起来像浏览器窗口的展示框。

Code mockup 代码模拟器

看起来像代码编辑器的代码块展示框。

Phone mockup 手机模拟器

iPhone 外观的模拟展示框。

Window mockup 窗口模拟器

看起来像操作系统窗口的展示框。

表单辅助类组件

Fieldset 字段集

用于分组相关表单元素的容器，包含标题和描述。

Filter 筛选器

单选按钮组，选择一项后隐藏其他选项并在选中项旁显示重置按钮。

Kbd 键盘按键

用于显示键盘快捷键的样式。

Label 标签

为输入字段提供名称或标题。

Theme Controller 主题控制器

通过带有 theme-controller 类的复选框或单选按钮切换页面主题。

Validator 验证器

根据输入验证规则将表单元素颜色更改为错误或成功状态的类。

弹窗类组件

Modal 模态框

点击按钮时显示对话框或弹出框。

链接类组件

Link 链接

为链接添加下划线样式的组件。

daisyUI 的所有组件都遵循以下设计原则：

语义化类名：使用 btn、card、modal 等直观类名，替代冗长的 Tailwind utility classes
纯 CSS 实现：无需 JavaScript 依赖，减少项目复杂度
主题支持：所有组件自动适配 30+ 内置主题
响应式设计：组件默认支持响应式布局
无障碍访问：遵循 ARIA 规范，支持键盘导航和屏幕阅读器

更多详细用法和代码示例，请访问 daisyUI 官方文档。