daisyui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

daisyUI 5

daisyUI 5 is a CSS library for Tailwind CSS 4 daisyUI 5 provides class names for common UI components

daisyUI 5 是适用于 Tailwind CSS 4 的 CSS 库 daisyUI 5 为常见 UI 组件提供类名

daisyUI 5 install notes

daisyUI 5 安装说明

install guide

daisyUI 5 requires Tailwind CSS 4
```
tailwind.config.js
```
file is deprecated in Tailwind CSS v4. do not use
```
tailwind.config.js
```
. Tailwind CSS v4 only needs
```
@import "tailwindcss";
```
in the CSS file if it's a node dependency.
daisyUI 5 can be installed using
```
npm i -D daisyui@latest
```
and then adding
```
@plugin "daisyui";
```
to the CSS file
daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files:

html

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency)

css

@import "tailwindcss";
@plugin "daisyui";

安装指南

daisyUI 5 需要依赖 Tailwind CSS 4
```
tailwind.config.js
```
文件在 Tailwind CSS v4 中已被弃用，请不要使用
```
tailwind.config.js
```
。如果是 Node 依赖项，Tailwind CSS v4 仅需在 CSS 文件中添加
```
@import "tailwindcss";
```
可以通过
```
npm i -D daisyui@latest
```
安装 daisyUI 5，然后在 CSS 文件中添加
```
@plugin "daisyui";
```
daisyUI 建议作为依赖项安装，但如果确实想通过 CDN 使用，可以使用 Tailwind CSS 和 daisyUI 的 CDN 文件：

html

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

如果是 Node 依赖项，包含 Tailwind CSS 和 daisyUI 的 CSS 文件如下：

css

@import "tailwindcss";
@plugin "daisyui";

daisyUI 5 usage rules

daisyUI 5 使用规则

We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component)
Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example
```
btn px-10
```
sets a custom horizontal padding to a
```
btn
```
If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the
```
!
```
at the end of the Tailwind CSS utility class to override the existing styles. For example
```
btn bg-red-500!
```
sets a custom background color to a
```
btn
```
forcefully. This is a last resort solution and should be used sparingly
If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility
when using Tailwind CSS
```
flex
```
and
```
grid
```
for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred.
suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
suggested - when designing , don't add a custom font unless it's necessary
don't add
```
bg-base-100 text-base-content
```
to body unless it's necessary
For design decisions, use Refactoring UI book best practices

daisyUI 5 class names are one of the following categories. These type names are only for reference and are not used in the actual code

```
component
```
: the required component class
```
part
```
: a child part of a component
```
style
```
: sets a specific style to component or part
```
behavior
```
: changes the behavior of component or part
```
color
```
: sets a specific color to component or part
```
size
```
: sets a specific size to component or part
```
placement
```
: sets a specific placement to component or part
```
direction
```
: sets a specific direction to component or part
```
modifier
```
: modifies the component or part in a specific way
```
variant
```
: prefixes for utility classes that conditionally apply styles. syntax is
```
variant:utility-class
```

我们可以通过为 HTML 元素添加 daisyUI 类名来设置样式。可添加组件类名、该组件可用的子部件类名以及修饰符类名
如果使用现有 daisyUI 类无法实现自定义样式，可以使用 Tailwind CSS 工具类来定制组件。例如
```
btn px-10
```
为
```
btn
```
设置自定义水平内边距
如果因 CSS 优先级问题，使用 Tailwind CSS 工具类无法覆盖 daisyUI 样式，可以在 Tailwind CSS 工具类末尾添加
```
!
```
强制覆盖现有样式。例如
```
btn bg-red-500!
```
强制为
```
btn
```
设置自定义背景色。这是最后的解决方案，应谨慎使用
如果 daisyUI 中没有特定组件或类似组件，可以使用 Tailwind CSS 工具类创建自定义组件
使用 Tailwind CSS 的
```
flex
```
和
```
grid
```
进行布局时，应使用 Tailwind CSS 响应式工具类前缀实现响应式效果
仅允许使用现有 daisyUI 类名或 Tailwind CSS 工具类
理想情况下，无需编写任何自定义 CSS。优先使用 daisyUI 类名或 Tailwind CSS 工具类
建议 - 如果需要占位图片，使用 https://picsum.photos/200/300 并设置所需尺寸
建议 - 设计时，除非必要，不要添加自定义字体
除非必要，不要为 body 添加
```
bg-base-100 text-base-content
```
设计决策请遵循《Refactoring UI》书籍中的最佳实践

daisyUI 5 类名分为以下类别。这些类别名称仅作参考，不会在实际代码中使用

```
component
```
: 必填的组件类
```
part
```
: 组件的子部件类
```
style
```
: 为组件或子部件设置特定样式
```
behavior
```
: 改变组件或子部件的行为
```
color
```
: 为组件或子部件设置特定颜色
```
size
```
: 为组件或子部件设置特定尺寸
```
placement
```
: 为组件或子部件设置特定位置
```
direction
```
: 为组件或子部件设置特定方向
```
modifier
```
: 以特定方式修改组件或子部件
```
variant
```
: 工具类的前缀，用于条件应用样式，语法为
```
variant:utility-class
```

Config

配置

daisyUI 5 config docs: https://daisyui.com/docs/config/ daisyUI without config:

css

@plugin "daisyui";

daisyUI config with

light

theme only:

css

@plugin "daisyui" {
  themes: light --default;
}

daisyUI with all the default configs:

css

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  include: ;
  exclude: ;
  prefix: ;
  logs: true;
}

An example config: In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode) All the other themes are enabled and can be used by adding

data-theme="THEME_NAME"

to the

<html>

element root scrollbar gutter is excluded.

daisy-

prefix is used for all daisyUI classes and console.log is disabled

css

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

daisyUI 5 配置文档：https://daisyui.com/docs/config/ 不使用配置的 daisyUI：

css

@plugin "daisyui";

仅启用

light

主题的 daisyUI 配置：

css

@plugin "daisyui" {
  themes: light --default;
}

包含所有默认配置的 daisyUI：

css

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  include: ;
  exclude: ;
  prefix: ;
  logs: true;
}

配置示例：以下配置中，启用了所有内置主题，其中 bumblebee 为默认主题，synthwave 为偏好深色主题（默认深色模式）所有其他主题均已启用，可通过为

<html>

元素添加

data-theme="THEME_NAME"

来使用排除了根滚动条间距，所有 daisyUI 类均使用

daisy-

前缀，禁用控制台日志

css

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

daisyUI 5 colors

daisyUI 5 颜色

daisyUI color names

daisyUI 颜色名称

```
primary
```
: Primary brand color, The main color of your brand
```
primary-content
```
: Foreground content color to use on primary color
```
secondary
```
: Secondary brand color, The optional, secondary color of your brand
```
secondary-content
```
: Foreground content color to use on secondary color
```
accent
```
: Accent brand color, The optional, accent color of your brand
```
accent-content
```
: Foreground content color to use on accent color
```
neutral
```
: Neutral dark color, For not-saturated parts of UI
```
neutral-content
```
: Foreground content color to use on neutral color
```
base-100
```
:-100 Base surface color of page, used for blank backgrounds
```
base-200
```
:-200 Base color, darker shade, to create elevations
```
base-300
```
:-300 Base color, even more darker shade, to create elevations
```
base-content
```
: Foreground content color to use on base color
```
info
```
: Info color, For informative/helpful messages
```
info-content
```
: Foreground content color to use on info color
```
success
```
: Success color, For success/safe messages
```
success-content
```
: Foreground content color to use on success color
```
warning
```
: Warning color, For warning/caution messages
```
warning-content
```
: Foreground content color to use on warning color
```
error
```
: Error color, For error/danger/destructive messages
```
error-content
```
: Foreground content color to use on error color

```
primary
```
: 品牌主色调，你的品牌主要颜色
```
primary-content
```
: 在主色调上使用的前景内容颜色
```
secondary
```
: 品牌次要色调，品牌可选的次要颜色
```
secondary-content
```
: 在次要色调上使用的前景内容颜色
```
accent
```
: 品牌强调色调，品牌可选的强调颜色
```
accent-content
```
: 在强调色调上使用的前景内容颜色
```
neutral
```
: 中性深色，用于 UI 中饱和度较低的部分
```
neutral-content
```
: 在中性深色上使用的前景内容颜色
```
base-100
```
: 页面基础表面色，用于空白背景
```
base-200
```
: 基础色，更深的色调，用于创建层次感
```
base-300
```
: 基础色，更深的色调，用于创建层次感
```
base-content
```
: 在基础色上使用的前景内容颜色
```
info
```
: 信息色，用于提示性/帮助类消息
```
info-content
```
: 在信息色上使用的前景内容颜色
```
success
```
: 成功色，用于成功/安全类消息
```
success-content
```
: 在成功色上使用的前景内容颜色
```
warning
```
: 警告色，用于警告/提醒类消息
```
warning-content
```
: 在警告色上使用的前景内容颜色
```
error
```
: 错误色，用于错误/危险/破坏性消息
```
error-content
```
: 在错误色上使用的前景内容颜色

daisyUI color rules

daisyUI 颜色规则

daisyUI adds semantic color names to Tailwind CSS colors
daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example,
```
bg-primary
```
will use the primary color for the background
daisyUI color names include variables as value so they can change based the theme
There's no need to use
```
dark:
```
for daisyUI color names
Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
If a Tailwind CSS color name (like
```
red-500
```
) is used, it will be same red color on all themes
If a daisyUI color name (like
```
primary
```
) is used, it will change color based on the theme
Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color
```
text-gray-800
```
on
```
bg-base-100
```
would be unreadable on a dark theme - because on dark theme,
```
bg-base-100
```
is a dark color
```
*-content
```
colors should have a good contrast compared to their associated colors
suggestion - when designing a page use
```
base-*
```
colors for majority of the page. use
```
primary
```
color for important elements

daisyUI 为 Tailwind CSS 颜色添加了语义化颜色名称
daisyUI 颜色名称可用于工具类，与其他 Tailwind CSS 颜色名称用法一致。例如
```
bg-primary
```
会将背景设置为主色调
daisyUI 颜色名称的值包含变量，因此会根据主题变化
daisyUI 颜色名称无需使用
```
dark:
```
前缀
理想情况下，应仅使用 daisyUI 颜色名称，以便颜色可根据主题自动变化
如果使用 Tailwind CSS 颜色名称（如
```
red-500
```
），它在所有主题中都是相同的红色
如果使用 daisyUI 颜色名称（如
```
primary
```
），它会根据主题改变颜色
应避免使用 Tailwind CSS 颜色名称设置文本颜色，因为在深色主题中，
```
bg-base-100
```
是深色，
```
text-gray-800
```
会变得难以阅读
```
*-content
```
颜色应与其关联颜色具有良好的对比度
建议 - 设计页面时，大部分页面使用
```
base-*
```
颜色，重要元素使用
```
primary
```
颜色

daisyUI custom theme with custom colors

自定义颜色的 daisyUI 自定义主题

A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:

css

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* set as default */
  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
  color-scheme: light; /* color of browser-provided UI */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
  --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
  --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
  /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. In so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
  --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. In so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */

  --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. In so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */

  --depth: 1; /* only 0 or 1 – Adds a shadow and subtle 3D depth effect to components */
  --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
}

包含 Tailwind CSS、daisyUI 和自定义 daisyUI 主题的 CSS 文件如下：

css

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* 设置为默认主题 */
  prefersdark: false; /* 设置为默认深色模式（prefers-color-scheme:dark） */
  color-scheme: light; /* 浏览器提供的 UI 颜色 */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* 选择器（复选框、开关、徽章）的边框半径 */
  --radius-field: 0.25rem; /* 字段（按钮、输入框、选择器、标签页）的边框半径 */
  --radius-box: 0.5rem; /* 容器（卡片、模态框、提示框）的边框半径 */
  /* --radius-* 的推荐值：0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* 选择器（复选框、开关、徽章）的基础尺寸。除非特意要更大的选择器，否则值必须为 0.25rem。如需更大，可设为 0.28125 或 0.3125；如需更小，可设为 0.21875 或 0.1875 */
  --size-field: 0.25rem; /* 字段（按钮、输入框、选择器、标签页）的基础尺寸。除非特意要更大的字段，否则值必须为 0.25rem。如需更大，可设为 0.28125 或 0.3125；如需更小，可设为 0.21875 或 0.1875 */

  --border: 1px; /* 边框尺寸。除非特意要更粗的边框，否则值必须为 1px。如需更粗，可设为 1.5px 或 2px；如需更细，可设为 0.5px */

  --depth: 1; /* 仅 0 或 1 – 为组件添加阴影和细微的 3D 层次感 */
  --noise: 0; /* 仅 0 或 1 - 为组件添加细微的噪点（颗粒）效果 */
}

Rules

规则

All CSS variables above are required
Colors can be OKLCH or hex or other formats
If you're generating a custom theme, do not include the comments from the example above. Just provide the code.

People can use https://daisyui.com/theme-generator/ visual tool to create their own theme.

上述所有 CSS 变量都是必填的
颜色可以是 OKLCH、十六进制或其他格式
如果生成自定义主题，请不要包含示例中的注释，仅提供代码即可

用户可以使用 https://daisyui.com/theme-generator/ 可视化工具创建自己的主题

daisyUI 5 components

daisyUI 5 组件

accordion

折叠面板

Accordion is used for showing and hiding content but only one item can stay open at a time

accordion docs

折叠面板用于显示和隐藏内容，但同一时间只能有一个项处于展开状态

折叠面板文档

Class names

类名

component:
```
collapse
```
part:
```
collapse-title
```
,
```
collapse-content
```

modifier:

collapse-arrow

collapse-plus

collapse-open

collapse-close

组件类：
```
collapse
```
子部件类：
```
collapse-title
```
,
```
collapse-content
```

修饰符类：

collapse-arrow

collapse-plus

collapse-open

collapse-close

Syntax

语法

html

<div class="collapse {MODIFIER}">{CONTENT}</div>

where content is:

html

<input type="radio" name="{name}" checked="{checked}" />
<div class="collapse-title">{title}</div>
<div class="collapse-content">{CONTENT}</div>

html

<div class="collapse {MODIFIER}">{CONTENT}</div>

其中内容为：

html

<input type="radio" name="{name}" checked="{checked}" />
<div class="collapse-title">{title}</div>
<div class="collapse-content">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier class names
Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time
If you have more than one set of accordion items on a page, use different names for the radio inputs on each set
Replace {name} with a unique name for the accordion group
replace
```
{checked}
```
with
```
checked="checked"
```
if you want the accordion to be open by default

{MODIFIER} 是可选的，可以使用任意一个修饰符类名
折叠面板使用单选框输入。所有同名的单选框协同工作，同一时间只能有一个处于展开状态
如果页面上有多组折叠面板项，每组单选框使用不同的名称
将 {name} 替换为折叠面板组的唯一名称
如果希望折叠面板默认展开，将
```
{checked}
```
替换为
```
checked="checked"
```

alert

提示框

Alert informs users about important events

alert docs

提示框用于向用户告知重要事件

提示框文档

Class names

类名

component:
```
alert
```
style:
```
alert-outline
```
,
```
alert-dash
```
,
```
alert-soft
```

color:

alert-info

alert-success

alert-warning

alert-error

direction:
```
alert-vertical
```
,
```
alert-horizontal
```

组件类：
```
alert
```
样式类：
```
alert-outline
```
,
```
alert-dash
```
,
```
alert-soft
```

颜色类：

alert-info

alert-success

alert-warning

alert-error

方向类：
```
alert-vertical
```
,
```
alert-horizontal
```

Syntax

语法

html

<div role="alert" class="alert {MODIFIER}">{CONTENT}</div>

html

<div role="alert" class="alert {MODIFIER}">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional and can have one of each style/color/direction class names
Add
```
sm:alert-horizontal
```
for responsive layouts

{MODIFIER} 是可选的，可以使用任意一个样式/颜色/方向类名
使用
```
sm:alert-horizontal
```
实现响应式布局

avatar

头像

Avatars are used to show a thumbnail

avatar docs

头像用于显示缩略图

头像文档

Class names

类名

component:
```
avatar
```
,
```
avatar-group
```

modifier:

avatar-online

avatar-offline

avatar-placeholder

组件类：
```
avatar
```
,
```
avatar-group
```

修饰符类：

avatar-online

avatar-offline

avatar-placeholder

Syntax

语法

html

<div class="avatar {MODIFIER}">
  <div>
    <img src="{image-url}" />
  </div>
</div>

html

<div class="avatar {MODIFIER}">
  <div>
    <img src="{image-url}" />
  </div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier class names
Use
```
avatar-group
```
for containing multiple avatars
You can set custom sizes using
```
w-*
```
and
```
h-*
```
You can use mask classes such as
```
mask-squircle
```
,
```
mask-hexagon
```
,
```
mask-triangle
```

{MODIFIER} 是可选的，可以使用任意一个修饰符类名
使用
```
avatar-group
```
包含多个头像
可以使用
```
w-*
```
和
```
h-*
```
设置自定义尺寸
可以使用遮罩类，如
```
mask-squircle
```
,
```
mask-hexagon
```
,
```
mask-triangle
```

badge

徽章

Badges are used to inform the user of the status of specific data

badge docs

徽章用于告知用户特定数据的状态

徽章文档

Class names

类名

component:
```
badge
```

style:

badge-outline

badge-dash

badge-soft

badge-ghost

color:

badge-neutral

badge-primary

badge-secondary

badge-accent

badge-info

badge-success

badge-warning

badge-error

size:

badge-xs

badge-sm

badge-md

badge-lg

badge-xl

组件类：
```
badge
```

样式类：

badge-outline

badge-dash

badge-soft

badge-ghost

颜色类：

badge-neutral

badge-primary

badge-secondary

badge-accent

badge-info

badge-success

badge-warning

badge-error

尺寸类：

badge-xs

badge-sm

badge-md

badge-lg

badge-xl

Syntax

语法

html

<span class="badge {MODIFIER}">Badge</span>

html

<span class="badge {MODIFIER}">Badge</span>

Rules

规则

{MODIFIER} is optional and can have one of each style/color/size class names
Can be used inside text or buttons
To create an empty badge, just remove the text between the span tags

{MODIFIER} 是可选的，可以使用任意一个样式/颜色/尺寸类名
可用于文本或按钮内部
要创建空徽章，只需移除 span 标签之间的文本

breadcrumbs

面包屑

Breadcrumbs helps users to navigate

breadcrumbs docs

面包屑帮助用户导航

面包屑文档

Class names

类名

component:
```
breadcrumbs
```

组件类：
```
breadcrumbs
```

Syntax

语法

html

<div class="breadcrumbs">
  <ul><li><a>Link</a></li></ul>
</div>

html

<div class="breadcrumbs">
  <ul><li><a>Link</a></li></ul>
</div>

Rules

规则

breadcrumbs only has one main class name
Can contain icons inside the links
If you set
```
max-width
```
or the list gets larger than the container it will scroll

面包屑只有一个主类名
链接内部可以包含图标
如果设置了
```
max-width
```
或列表超出容器宽度，会自动滚动

button

按钮

Buttons allow the user to take actions

button docs

按钮允许用户执行操作

按钮文档

Class names

类名

component:
```
btn
```

color:

btn-neutral

btn-primary

btn-secondary

btn-accent

btn-info

btn-success

btn-warning

btn-error

style:

btn-outline

btn-dash

btn-soft

btn-ghost

btn-link

behavior:
```
btn-active
```
,
```
btn-disabled
```
size:
```
btn-xs
```
,
```
btn-sm
```
,
```
btn-md
```
,
```
btn-lg
```
,
```
btn-xl
```
modifier:
```
btn-wide
```
,
```
btn-block
```
,
```
btn-square
```
,
```
btn-circle
```

组件类：
```
btn
```

颜色类：

btn-neutral

btn-primary

btn-secondary

btn-accent

btn-info

btn-success

btn-warning

btn-error

样式类：

btn-outline

btn-dash

btn-soft

btn-ghost

btn-link

行为类：
```
btn-active
```
,
```
btn-disabled
```
尺寸类：
```
btn-xs
```
,
```
btn-sm
```
,
```
btn-md
```
,
```
btn-lg
```
,
```
btn-xl
```
修饰符类：
```
btn-wide
```
,
```
btn-block
```
,
```
btn-square
```
,
```
btn-circle
```

Syntax

语法

html

<button class="btn {MODIFIER}">Button</button>

html

<button class="btn {MODIFIER}">Button</button>

Rules

规则

{MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names
btn can be used on any html tags such as
```
<button>
```
,
```
<a>
```
,
```
<input>
```
btn can have an icon before or after the text
set
```
tabindex="-1" role="button" aria-disabled="true"
```
if you want to disable the button using a class name

{MODIFIER} 是可选的，可以使用任意一个颜色/样式/行为/尺寸/修饰符类名
btn 可用于任意 HTML 标签，如
```
<button>
```
,
```
<a>
```
,
```
<input>
```
btn 可以在文本前后添加图标

如果想通过类名禁用按钮，设置

tabindex="-1" role="button" aria-disabled="true"

calendar

日历

Calendar includes styles for different calendar libraries

calendar docs

日历包含不同日历库的样式

日历文档

Class names

类名

component

```
cally (for Cally web component)
```

pika-single (for the input field that opens Pikaday calendar)

react-day-picker (for the DayPicker component)

组件类

```
cally (用于 Cally Web 组件)
```

pika-single (用于打开 Pikaday 日历的输入框)

react-day-picker (用于 DayPicker 组件)

Syntax

语法

For Cally:

html

<calendar-date class="cally">{CONTENT}</calendar-date>

For Pikaday:

html

<input type="text" class="input pika-single">

For React Day Picker:

html

<DayPicker className="react-day-picker">

对于 Cally：

html

<calendar-date class="cally">{CONTENT}</calendar-date>

对于 Pikaday：

html

<input type="text" class="input pika-single">

对于 React Day Picker：

html

<DayPicker className="react-day-picker">

Rules

规则

daisyUI supports Cally, Pikaday, React Day Picker

daisyUI 支持 Cally、Pikaday、React Day Picker

card

卡片

Cards are used to group and display content

card docs

卡片用于分组和展示内容

卡片文档

Class names

类名

component:
```
card
```
part:
```
card-title
```
,
```
card-body
```
,
```
card-actions
```
style:
```
card-border
```
,
```
card-dash
```
modifier:
```
card-side
```
,
```
image-full
```
size:
```
card-xs
```
,
```
card-sm
```
,
```
card-md
```
,
```
card-lg
```
,
```
card-xl
```

组件类：
```
card
```
子部件类：
```
card-title
```
,
```
card-body
```
,
```
card-actions
```
样式类：
```
card-border
```
,
```
card-dash
```
修饰符类：
```
card-side
```
,
```
image-full
```
尺寸类：
```
card-xs
```
,
```
card-sm
```
,
```
card-md
```
,
```
card-lg
```
,
```
card-xl
```

Syntax

语法

html

<div class="card {MODIFIER}">
  <figure><img src="{image-url}" alt="{alt-text}" /></figure>
  <div class="card-body">
    <h2 class="card-title">{title}</h2>
    <p>{CONTENT}</p>
    <div class="card-actions">{actions}</div>
  </div>
</div>

html

<div class="card {MODIFIER}">
  <figure><img src="{image-url}" alt="{alt-text}" /></figure>
  <div class="card-body">
    <h2 class="card-title">{title}</h2>
    <p>{CONTENT}</p>
    <div class="card-actions">{actions}</div>
  </div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier class names and one of the size class names
```
<figure>
```
and
```
<div class="card-body">
```
are optional
can use
```
sm:card-horizontal
```
for responsive layouts
If image is placed after
```
card-body
```
, the image will be placed at the bottom

{MODIFIER} 是可选的，可以使用任意一个修饰符类名和尺寸类名
```
<figure>
```
和
```
<div class="card-body">
```
是可选的
使用
```
sm:card-horizontal
```
实现响应式布局
如果图片放在
```
card-body
```
之后，图片会显示在底部

carousel

轮播

Carousel show images or content in a scrollable area

carousel docs

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

轮播文档

Class names

类名

component:
```
carousel
```
part:
```
carousel-item
```

modifier:

carousel-start

carousel-center

carousel-end

direction:
```
carousel-horizontal
```
,
```
carousel-vertical
```

组件类：
```
carousel
```
子部件类：
```
carousel-item
```

修饰符类：

carousel-start

carousel-center

carousel-end

方向类：
```
carousel-horizontal
```
,
```
carousel-vertical
```

Syntax

语法

html

<div class="carousel {MODIFIER}">{CONTENT}</div>

html

<div class="carousel {MODIFIER}">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/direction class names

Content is a list of

carousel-item

divs:

<div class="carousel-item"></div>

To create a full-width carousel, add
```
w-full
```
to each carousel item

{MODIFIER} 是可选的，可以使用任意一个修饰符/方向类名

内容是一系列

carousel-item

容器：

<div class="carousel-item"></div>

要创建全屏轮播，为每个 carousel item 添加
```
w-full
```

chat

聊天气泡

Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc

chat docs

聊天气泡用于展示一行对话及其所有数据，包括作者头像、作者名称、时间等

聊天气泡文档

Class names

类名

component:
```
chat
```

part:

chat-image

chat-header

chat-footer

chat-bubble

placement:
```
chat-start
```
,
```
chat-end
```

color:

chat-bubble-neutral

chat-bubble-primary

chat-bubble-secondary

chat-bubble-accent

chat-bubble-info

chat-bubble-success

chat-bubble-warning

chat-bubble-error

组件类：
```
chat
```

子部件类：

chat-image

chat-header

chat-footer

chat-bubble

位置类：
```
chat-start
```
,
```
chat-end
```

颜色类：

chat-bubble-neutral

chat-bubble-primary

chat-bubble-secondary

chat-bubble-accent

chat-bubble-info

chat-bubble-success

chat-bubble-warning

chat-bubble-error

Syntax

语法

html

<div class="chat {PLACEMENT}">
  <div class="chat-image"></div>
  <div class="chat-header"></div>
  <div class="chat-bubble {COLOR}">Message text</div>
  <div class="chat-footer"></div>
</div>

html

<div class="chat {PLACEMENT}">
  <div class="chat-image"></div>
  <div class="chat-header"></div>
  <div class="chat-bubble {COLOR}">Message text</div>
  <div class="chat-footer"></div>
</div>

Rules

规则

{PLACEMENT} is required and must be either
```
chat-start
```
or
```
chat-end
```
{COLOR} is optional and can have one of the color class names
To add an avatar, use
```
<div class="chat-image avatar">
```
and nest the avatar content inside

{PLACEMENT} 是必填的，必须是
```
chat-start
```
或
```
chat-end
```
{COLOR} 是可选的，可以使用任意一个颜色类名
要添加头像，使用
```
<div class="chat-image avatar">
```
并在内部嵌套头像内容

checkbox

复选框

Checkboxes are used to select or deselect a value

checkbox docs

复选框用于选择或取消选择值

复选框文档

Class names

类名

component:
```
checkbox
```

color:

checkbox-primary

checkbox-secondary

checkbox-accent

checkbox-neutral

checkbox-success

checkbox-warning

checkbox-info

checkbox-error

size:

checkbox-xs

checkbox-sm

checkbox-md

checkbox-lg

checkbox-xl

组件类：
```
checkbox
```

颜色类：

checkbox-primary

checkbox-secondary

checkbox-accent

checkbox-neutral

checkbox-success

checkbox-warning

checkbox-info

checkbox-error

尺寸类：

checkbox-xs

checkbox-sm

checkbox-md

checkbox-lg

checkbox-xl

Syntax

语法

html

<input type="checkbox" class="checkbox {MODIFIER}" />

html

<input type="checkbox" class="checkbox {MODIFIER}" />

Rules

规则

{MODIFIER} is optional and can have one of each color/size class names

{MODIFIER} 是可选的，可以使用任意一个颜色/尺寸类名

collapse

折叠面板（独立版）

Collapse is used for showing and hiding content

collapse docs

折叠面板用于显示和隐藏内容

折叠面板文档

Class names

类名

component:
```
collapse
```
part:
```
collapse-title
```
,
```
collapse-content
```

modifier:

collapse-arrow

collapse-plus

collapse-open

collapse-close

组件类：
```
collapse
```
子部件类：
```
collapse-title
```
,
```
collapse-content
```

修饰符类：

collapse-arrow

collapse-plus

collapse-open

collapse-close

Syntax

语法

html

<div tabindex="0" class="collapse {MODIFIER}">
  <div class="collapse-title">{title}</div>
  <div class="collapse-content">{CONTENT}</div>
</div>

html

<div tabindex="0" class="collapse {MODIFIER}">
  <div class="collapse-title">{title}</div>
  <div class="collapse-content">{CONTENT}</div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier class names
instead of
```
tabindex="0"
```
, you can use
```
<input type="checkbox">
```
as a first child
Can also be a details/summary tag

{MODIFIER} 是可选的，可以使用任意一个修饰符类名
可以用
```
<input type="checkbox">
```
作为第一个子元素替代
```
tabindex="0"
```
也可以使用 details/summary 标签

countdown

数字倒计时

Countdown gives you a transition effect when you change a number between 0 to 999

countdown docs

数字倒计时在数字 0 到 999 之间变化时提供过渡效果

数字倒计时文档

Class names

类名

component:
```
countdown
```

组件类：
```
countdown
```

Syntax

语法

html

<span class="countdown">
  <span style="--value:{number};">number</span>
</span>

html

<span class="countdown">
  <span style="--value:{number};">number</span>
</span>

Rules

规则

The
```
--value
```
CSS variable and text must be a number between 0 and 999
you need to change the span text and the
```
--value
```
CSS variable using JS
you need to add
```
aria-live="polite"
```
and
```
aria-label="{number}"
```
so screen readers can properly read changes

```
--value
```
CSS 变量和文本必须是 0 到 999 之间的数字
需要使用 JS 改变 span 文本和
```
--value
```
CSS 变量
需要添加
```
aria-live="polite"
```
和
```
aria-label="{number}"
```
以便屏幕阅读器正确读取变化

diff

差异对比

Diff component shows a side-by-side comparison of two items

diff docs

差异对比组件用于并排展示两个项目的对比

差异对比文档

Class names

类名

component:
```
diff
```
part:
```
diff-item-1
```
,
```
diff-item-2
```
,
```
diff-resizer
```

组件类：
```
diff
```
子部件类：
```
diff-item-1
```
,
```
diff-item-2
```
,
```
diff-resizer
```

Syntax

语法

html

<figure class="diff">
  <div class="diff-item-1">{item1}</div>
  <div class="diff-item-2">{item2}</div>
  <div class="diff-resizer"></div>
</figure>

html

<figure class="diff">
  <div class="diff-item-1">{item1}</div>
  <div class="diff-item-2">{item2}</div>
  <div class="diff-resizer"></div>
</figure>

Rules

规则

To maintain aspect ratio, add
```
aspect-16/9
```
or other aspect ratio classes to
```
<figure class="diff">
```
element

为了保持宽高比，为
```
<figure class="diff">
```
元素添加
```
aspect-16/9
```
或其他宽高比类

divider

分隔线

Divider will be used to separate content vertically or horizontally

divider docs

分隔线用于垂直或水平分隔内容

分隔线文档

Class names

类名

component:
```
divider
```

color:

divider-neutral

divider-primary

divider-secondary

divider-accent

divider-success

divider-warning

divider-info

divider-error

direction:
```
divider-vertical
```
,
```
divider-horizontal
```
placement:
```
divider-start
```
,
```
divider-end
```

组件类：
```
divider
```

颜色类：

divider-neutral

divider-primary

divider-secondary

divider-accent

divider-success

divider-warning

divider-info

divider-error

方向类：
```
divider-vertical
```
,
```
divider-horizontal
```
位置类：
```
divider-start
```
,
```
divider-end
```

Syntax

语法

html

<div class="divider {MODIFIER}">{text}</div>

html

<div class="divider {MODIFIER}">{text}</div>

Rules

规则

{MODIFIER} is optional and can have one of each direction/color/placement class names
Omit text for a blank divider

{MODIFIER} 是可选的，可以使用任意一个方向/颜色/位置类名
省略文本即可创建空白分隔线

dock

底部导航栏

Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen

dock docs

底部导航栏（也称为 Bottom navigation 或 Bottom bar）是为用户提供导航选项的 UI 元素，固定在屏幕底部

底部导航栏文档

Class names

类名

component:
```
dock
```
part:
```
dock-label
```
modifier:
```
dock-active
```
size:
```
dock-xs
```
,
```
dock-sm
```
,
```
dock-md
```
,
```
dock-lg
```
,
```
dock-xl
```

组件类：
```
dock
```
子部件类：
```
dock-label
```
修饰符类：
```
dock-active
```
尺寸类：
```
dock-xs
```
,
```
dock-sm
```
,
```
dock-md
```
,
```
dock-lg
```
,
```
dock-xl
```

Syntax

语法

html

<div class="dock {MODIFIER}">{CONTENT}</div>

where content is a list of buttons:

html

<button>
    <svg>{icon}</svg>
    <span class="dock-label">Text</span>
</button>

html

<div class="dock {MODIFIER}">{CONTENT}</div>

其中内容是一系列按钮：

html

<button>
    <svg>{icon}</svg>
    <span class="dock-label">Text</span>
</button>

Rules

规则

{MODIFIER} is optional and can have one of the size class names
To make a button active, add
```
dock-active
```
class to the button

add

<meta name="viewport" content="viewport-fit=cover">

is required for responsivness of the dock in iOS

{MODIFIER} 是可选的，可以使用任意一个尺寸类名
要使按钮处于激活状态，为按钮添加
```
dock-active
```
类
在 iOS 中，添加
```
<meta name="viewport" content="viewport-fit=cover">
```
是实现底部导航栏响应式的必要条件

drawer

抽屉

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page

drawer docs

抽屉是一种网格布局，可以在页面左侧或右侧显示/隐藏侧边栏

抽屉文档

Class names

类名

component:
```
drawer
```

part:

drawer-toggle

drawer-content

drawer-side

drawer-overlay

placement:
```
drawer-end
```
modifier:
```
drawer-open
```
variant:
```
is-drawer-open:
```
,
```
is-drawer-close:
```

组件类：
```
drawer
```

子部件类：

drawer-toggle

drawer-content

drawer-side

drawer-overlay

位置类：
```
drawer-end
```
修饰符类：
```
drawer-open
```
变体类：
```
is-drawer-open:
```
,
```
is-drawer-close:
```

Syntax

语法

html

<div class="drawer {MODIFIER}">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">{CONTENT}</div>
  <div class="drawer-side">{SIDEBAR}</div>
</div>

where {CONTENT} can be navbar, site content, footer, etc and {SIDEBAR} can be a menu like:

html

<ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

To open/close the drawer, use a label that points to the

drawer-toggle

input:

html

<label for="my-drawer" class="btn drawer-button">Open/close drawer</label>

Example: This sidebar is always visible on large screen, can be toggled on small screen:

html

<div class="drawer lg:drawer-open">
  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content flex flex-col items-center justify-center">
    <!-- Page content here -->
    <label for="my-drawer-3" class="btn drawer-button lg:hidden">
      Open drawer
    </label>
  </div>
  <div class="drawer-side">
    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

Example: This sidebar is always visible. When it's close we only see iocns, when it's open we see icons and text

html

<div class="drawer lg:drawer-open">
  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- Page content here -->
  </div>
  <div class="drawer-side is-drawer-close:overflow-visible">
    <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
    <div class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex flex-col items-start min-h-full">
      <!-- Sidebar content here -->
      <ul class="menu w-full grow">
        <!-- list item -->
        <li>
          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
            🏠
            <span class="is-drawer-close:hidden">Homepage</span>
          </button>
        </li>
        <!-- list item -->
        <li>
          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
            ⚙️
            <span class="is-drawer-close:hidden">Settings</span>
          </button>
        </li>
      </ul>
      <!-- button to open/close drawer -->
      <div class="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Open">
        <label for="my-drawer-4" class="btn btn-ghost btn-circle drawer-button is-drawer-open:rotate-y-180">
          ↔️
        </label>
      </div>
    </div>
  </div>
</div>

html

<div class="drawer {MODIFIER}">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">{CONTENT}</div>
  <div class="drawer-side">{SIDEBAR}</div>
</div>

其中 {CONTENT} 可以是导航栏、站点内容、页脚等 {SIDEBAR} 可以是如下菜单：

html

<ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

要打开/关闭抽屉，使用指向

drawer-toggle

输入框的 label：

html

<label for="my-drawer" class="btn drawer-button">Open/close drawer</label>

示例：侧边栏在大屏幕上始终可见，在小屏幕上可切换：

html

<div class="drawer lg:drawer-open">
  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content flex flex-col items-center justify-center">
    <!-- 页面内容 -->
    <label for="my-drawer-3" class="btn drawer-button lg:hidden">
      Open drawer
    </label>
  </div>
  <div class="drawer-side">
    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <!-- 侧边栏内容 -->
      <li><button>Sidebar Item 1</button></li>
      <li><button>Sidebar Item 2</button></li>
    </ul>
  </div>
</div>

示例：侧边栏始终可见。关闭时仅显示图标，打开时显示图标和文本：

html

<div class="drawer lg:drawer-open">
  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- 页面内容 -->
  </div>
  <div class="drawer-side is-drawer-close:overflow-visible">
    <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
    <div class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex flex-col items-start min-h-full">
      <!-- 侧边栏内容 -->
      <ul class="menu w-full grow">
        <!-- 列表项 -->
        <li>
          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
            🏠
            <span class="is-drawer-close:hidden">Homepage</span>
          </button>
        </li>
        <!-- 列表项 -->
        <li>
          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
            ⚙️
            <span class="is-drawer-close:hidden">Settings</span>
          </button>
        </li>
      </ul>
      <!-- 打开/关闭抽屉的按钮 -->
      <div class="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Open">
        <label for="my-drawer-4" class="btn btn-ghost btn-circle drawer-button is-drawer-open:rotate-y-180">
          ↔️
        </label>
      </div>
    </div>
  </div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/placement class names
```
id
```
is required for the
```
drawer-toggle
```
input. change
```
my-drawer
```
to a unique id according to your needs
```
lg:drawer-open
```
can be used to make sidebar visible on larger screens
```
drawer-toggle
```
is a hidden checkbox. Use label with "for" attribute to toggle state

if you want to open the drawer when a button is clicked, use

<label for="my-drawer" class="btn drawer-button">Open drawer</label>

where

my-drawer

is the id of the

drawer-toggle

input

when using drawer, every page content must be inside
```
drawer-content
```
element. for example navbar, footer, etc should not be outside of
```
drawer
```

{MODIFIER} 是可选的，可以使用任意一个修饰符/位置类名
```
drawer-toggle
```
输入框需要
```
id
```
，根据需求将
```
my-drawer
```
改为唯一 id
使用
```
lg:drawer-open
```
可使侧边栏在大屏幕上可见
```
drawer-toggle
```
是隐藏的复选框。使用带有 "for" 属性的 label 切换状态

如果想点击按钮打开抽屉，使用

<label for="my-drawer" class="btn drawer-button">Open drawer</label>

，其中

my-drawer

是

drawer-toggle

输入框的 id

使用抽屉时，所有页面内容必须放在
```
drawer-content
```
元素内。例如导航栏、页脚等不应放在
```
drawer
```
外部

dropdown

下拉菜单

Dropdown can open a menu or any other element when the button is clicked

dropdown docs

点击按钮时，下拉菜单可以展开菜单或其他元素

下拉菜单文档

Class names

类名

component:
```
dropdown
```
part:
```
dropdown-content
```

placement:

dropdown-start

dropdown-center

dropdown-end

dropdown-top

dropdown-bottom

dropdown-left

dropdown-right

modifier:

dropdown-hover

dropdown-open

dropdown-close

组件类：
```
dropdown
```
子部件类：
```
dropdown-content
```

位置类：

dropdown-start

dropdown-center

dropdown-end

dropdown-top

dropdown-bottom

dropdown-left

dropdown-right

修饰符类：

dropdown-hover

dropdown-open

dropdown-close

Syntax

语法

Using details and summary

html

<details class="dropdown">
  <summary>Button</summary>
  <ul class="dropdown-content">{CONTENT}</ul>
</details>

Using popover API

html

<button popovertarget="{id}" style="anchor-name:--{anchor}">{button}</button>
<ul class="dropdown-content" popover id="{id}" style="position-anchor:--{anchor}">{CONTENT}</ul>

Using CSS focus

html

<div class="dropdown">
  <div tabindex="0" role="button">Button</div>
  <ul tabindex="-1" class="dropdown-content">{CONTENT}</ul>
</div>

使用 details 和 summary：

html

<details class="dropdown">
  <summary>Button</summary>
  <ul class="dropdown-content">{CONTENT}</ul>
</details>

使用弹出层 API：

html

<button popovertarget="{id}" style="anchor-name:--{anchor}">{button}</button>
<ul class="dropdown-content" popover id="{id}" style="position-anchor:--{anchor}">{CONTENT}</ul>

使用 CSS 焦点：

html

<div class="dropdown">
  <div tabindex="0" role="button">Button</div>
  <ul tabindex="-1" class="dropdown-content">{CONTENT}</ul>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/placement class names
replace
```
{id}
```
and
```
{anchor}
```
with a unique name
For CSS focus dropdowns, use
```
tabindex="0"
```
and
```
role="button"
```
on the button
The content can be any HTML element (not just
```
<ul>
```
)

{MODIFIER} 是可选的，可以使用任意一个修饰符/位置类名
将
```
{id}
```
和
```
{anchor}
```
替换为唯一名称
对于 CSS 焦点下拉菜单，在按钮上使用
```
tabindex="0"
```
和
```
role="button"
```
内容可以是任意 HTML 元素（不只是
```
<ul>
```
）

fab

浮动操作按钮

FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle)

fab docs

FAB（Floating Action Button）固定在屏幕底部角落。它包含一个可聚焦、可访问的按钮元素。点击或聚焦时，会以垂直排列或花形（四分之一圆）显示额外按钮（称为快速拨号按钮）

浮动操作按钮文档

Class names

类名

component:
```
fab
```
part:
```
fab-close
```
,
```
fab-main-action
```
modifier:
```
fab-flower
```

组件类：
```
fab
```
子部件类：
```
fab-close
```
,
```
fab-main-action
```
修饰符类：
```
fab-flower
```

Syntax

语法

A single FAB in the corder of screen

html

<div class="fab">
  <button class="btn btn-lg btn-circle">{IconOriginal}</button>
</div>

A FAB that opens a 3 other buttons in the corner of page vertically

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="btn btn-lg btn-circle">{Icon1}</button>
  <button class="btn btn-lg btn-circle">{Icon2}</button>
  <button class="btn btn-lg btn-circle">{Icon3}</button>
</div>

A FAB that opens a 3 other buttons in the corner of page vertically and they have label text

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>

FAB with rectangle buttons. These are not circular buttons so they can have more content.

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="btn btn-lg">{Label1}</button>
  <button class="btn btn-lg">{Label2}</button>
  <button class="btn btn-lg">{Label3}</button>
</div>

FAB with close button. When FAB is open, the original button is replaced with a close button

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">✕</span></div>
  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>

FAB with Main Action button. When FAB is open, the original button is replaced with a main action button

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <div class="fab-main-action">
    {LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
  </div>
  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>

FAB Flower. It opens the buttons in a flower shape (quarter circle) arrangement instead of vertical

html

<div class="fab fab-flower">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
  <button class="btn btn-lg btn-circle">{Icon1}</button>
  <button class="btn btn-lg btn-circle">{Icon2}</button>
  <button class="btn btn-lg btn-circle">{Icon3}</button>
</div>

FAB Flower with tooltips. There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function

html

<div class="fab fab-flower">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
  <div class="tooltip tooltip-left" data-tip="{Label1}">
    <button class="btn btn-lg btn-circle">{Icon1}</button>
  </div>
  <div class="tooltip tooltip-left" data-tip="{Label2}">
    <button class="btn btn-lg btn-circle">{Icon2}</button>
  </div>
  <div class="tooltip tooltip-left" data-tip="{Label3}">
    <button class="btn btn-lg btn-circle">{Icon3}</button>
  </div>
</div>

屏幕角落的单个 FAB：

html

<div class="fab">
  <button class="btn btn-lg btn-circle">{IconOriginal}</button>
</div>

在页面角落垂直展开 3 个其他按钮的 FAB：

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="btn btn-lg btn-circle">{Icon1}</button>
  <button class="btn btn-lg btn-circle">{Icon2}</button>
  <button class="btn btn-lg btn-circle">{Icon3}</button>
</div>

在页面角落垂直展开 3 个带标签文本的按钮的 FAB：

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>

带矩形按钮的 FAB。这些不是圆形按钮，因此可以包含更多内容：

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="btn btn-lg">{Label1}</button>
  <button class="btn btn-lg">{Label2}</button>
  <button class="btn btn-lg">{Label3}</button>
</div>

带关闭按钮的 FAB。打开 FAB 时，原按钮会替换为关闭按钮：

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">✕</span></div>
  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>

带主操作按钮的 FAB。打开 FAB 时，原按钮会替换为主操作按钮：

html

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <div class="fab-main-action">
    {LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
  </div>
  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>

花形 FAB。它以花形（四分之一圆）排列展开按钮，而非垂直排列：

html

<div class="fab fab-flower">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
  <button class="btn btn-lg btn-circle">{Icon1}</button>
  <button class="btn btn-lg btn-circle">{Icon2}</button>
  <button class="btn btn-lg btn-circle">{Icon3}</button>
</div>

带提示框的花形 FAB。四分之一圆中没有空间放置文本标签，因此使用提示框指示按钮功能：

html

<div class="fab fab-flower">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
  <button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
  <div class="tooltip tooltip-left" data-tip="{Label1}">
    <button class="btn btn-lg btn-circle">{Icon1}</button>
  </div>
  <div class="tooltip tooltip-left" data-tip="{Label2}">
    <button class="btn btn-lg btn-circle">{Icon2}</button>
  </div>
  <div class="tooltip tooltip-left" data-tip="{Label3}">
    <button class="btn btn-lg btn-circle">{Icon3}</button>
  </div>
</div>

Rules

规则

{Icon*} should be replaced with the appropriate icon for each button. SVG icons are recommended
{IconOriginal} is the icon that we see before opening the FAB
{IconMainAction} is the icon we see after opening the FAB
{Icon1}, {Icon2}, {Icon3} are the icons for the additional buttons
{Label*} is the label text for each button

{Icon*} 应替换为每个按钮的对应图标。推荐使用 SVG 图标
{IconOriginal} 是打开 FAB 前显示的图标
{IconMainAction} 是打开 FAB 后显示的图标
{Icon1}, {Icon2}, {Icon3} 是额外按钮的图标
{Label*} 是每个按钮的标签文本

fieldset

字段集

Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description

fieldset docs

字段集用于分组相关表单元素。它包含作为标题的 fieldset-legend 和作为描述的 label

字段集文档

Class names

类名

Component:
```
fieldset
```
,
```
label
```
Parts:
```
fieldset-legend
```

组件类：
```
fieldset
```
,
```
label
```
子部件类：
```
fieldset-legend
```

Syntax

语法

html

<fieldset class="fieldset">
  <legend class="fieldset-legend">{title}</legend>
  {CONTENT}
  <p class="label">{description}</p>
</fieldset>

html

<fieldset class="fieldset">
  <legend class="fieldset-legend">{title}</legend>
  {CONTENT}
  <p class="label">{description}</p>
</fieldset>

Rules

规则

You can use any element as a direct child of fieldset to add form elements

可以使用任意元素作为 fieldset 的直接子元素来添加表单元素

file-input

文件输入框

File Input is a an input field for uploading files

file-input docs

文件输入框用于上传文件的输入字段

文件输入框文档

Class Names:

类名

Component:
```
file-input
```
Style:
```
file-input-ghost
```

Color:

file-input-neutral

file-input-primary

file-input-secondary

file-input-accent

file-input-info

file-input-success

file-input-warning

file-input-error

Size:

file-input-xs

file-input-sm

file-input-md

file-input-lg

file-input-xl

组件类：
```
file-input
```
样式类：
```
file-input-ghost
```

颜色类：

file-input-neutral

file-input-primary

file-input-secondary

file-input-accent

file-input-info

file-input-success

file-input-warning

file-input-error

尺寸类：

file-input-xs

file-input-sm

file-input-md

file-input-lg

file-input-xl

Syntax

语法

html

<input type="file" class="file-input {MODIFIER}" />

html

<input type="file" class="file-input {MODIFIER}" />

Rules

规则

{MODIFIER} is optional and can have one of each style/color/size class names

{MODIFIER} 是可选的，可以使用任意一个样式/颜色/尺寸类名

filter

筛选器

Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option

filter docs

筛选器是一组单选按钮。选择其中一个选项会隐藏其他选项，并在所选选项旁边显示重置按钮

筛选器文档

Class names

类名

component:
```
filter
```
part:
```
filter-reset
```

组件类：
```
filter
```
子部件类：
```
filter-reset
```

Syntax

语法

Using HTML form

html

<form class="filter">
  <input class="btn btn-square" type="reset" value="×"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
</form>

Without HTML form

html

<div class="filter">
  <input class="btn filter-reset" type="radio" name="{NAME}" aria-label="×"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
</div>

使用 HTML 表单：

html

<form class="filter">
  <input class="btn btn-square" type="reset" value="×"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
</form>

不使用 HTML 表单：

html

<div class="filter">
  <input class="btn filter-reset" type="radio" name="{NAME}" aria-label="×"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
</div>

Rules

规则

replace
```
{NAME}
```
with proper value, according to the context of the filter
Each set of radio inputs must have unique
```
name
```
attributes to avoid conflicts
Use
```
<form>
```
tag when possible and only use
```
<div>
```
if you can't use a HTML form for some reason
Use
```
filter-reset
```
class for the reset button

根据筛选器的上下文，将
```
{NAME}
```
替换为合适的值
每组单选输入必须有唯一的
```
name
```
属性，避免冲突
尽可能使用
```
<form>
```
标签，仅在无法使用 HTML 表单时使用
```
<div>
```
为重置按钮使用
```
filter-reset
```
类

footer

页脚

Footer can contain logo, copyright notice, and links to other pages

footer docs

页脚文档

Class names

类名

component:
```
footer
```
part:
```
footer-title
```
placement:
```
footer-center
```
direction:
```
footer-horizontal
```
,
```
footer-vertical
```

组件类：
```
footer
```
子部件类：
```
footer-title
```
位置类：
```
footer-center
```
方向类：
```
footer-horizontal
```
,
```
footer-vertical
```

Syntax

语法

html

<footer class="footer {MODIFIER}">{CONTENT}</footer>

where content can contain several

<nav>

tags with

footer-title

and links inside

html

<footer class="footer {MODIFIER}">{CONTENT}</footer>

其中内容可以包含多个带有

footer-title

和内部链接的

<nav>

标签

Rules

规则

{MODIFIER} is optional and can have one of each placement/direction class names
try to use
```
sm:footer-horizontal
```
to make footer responsive
suggestion - use
```
base-200
```
for background color

{MODIFIER} 是可选的，可以使用任意一个位置/方向类名
尝试使用
```
sm:footer-horizontal
```
实现响应式页脚
建议 - 使用
```
base-200
```
作为背景色

hero

英雄区

Hero is a component for displaying a large box or image with a title and description

hero docs

英雄区用于展示包含标题和描述的大容器或图片

英雄区文档

Class names

类名

component:
```
hero
```
part:
```
hero-content
```
,
```
hero-overlay
```

组件类：
```
hero
```
子部件类：
```
hero-content
```
,
```
hero-overlay
```

Syntax

语法

html

<div class="hero {MODIFIER}">{CONTENT}</div>

html

<div class="hero {MODIFIER}">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional
Use
```
hero-content
```
for the text content
Use
```
hero-overlay
```
inside the hero to overlay the background image with a color
Content can contain a figure

{MODIFIER} 是可选的
使用
```
hero-content
```
放置文本内容
在 hero 内部使用
```
hero-overlay
```
为背景图片添加颜色叠加
内容可以包含 figure

hover-3d

3D悬停效果

Hover 3D is a wrapper component that adds a 3D hover effect to its content. When we hover over the component, it tilts and rotates based on the mouse position, creating an interactive 3D effect.

hover-3d

works by placing 8 hover zones on top of the content. Each zone detects mouse movement and applies a slight rotation to the content based on the mouse position within that zone. The combined effect of all 8 zones creates a smooth and responsive 3D tilt effect as the user moves their mouse over the component.

Only use non-interactive content inside the

hover-3d

wrapper. If you want to make the entire card clickable, use a link for the whole

hover-3d

component instead of putting interactive elements like buttons or links inside it.

hover-3d docs

3D悬停效果是一个包装组件，可为其内容添加3D悬停效果。当鼠标悬停在组件上时，它会根据鼠标位置倾斜和旋转，创建交互式3D效果。

hover-3d

通过在内容上方放置8个悬停区域来工作。每个区域检测鼠标移动，并根据鼠标在该区域内的位置对内容应用轻微旋转。所有8个区域的组合效果，在用户鼠标移动时，会创建平滑且响应式的3D倾斜效果。

仅在

hover-3d

包装器内使用非交互式内容。如果想让整个卡片可点击，为整个

hover-3d

组件使用链接，而非在内部放置按钮或链接等交互式元素。

3D悬停效果文档

Class names

类名

component:
```
hover-3d
```

组件类：
```
hover-3d
```

Syntax

语法

html

<div class="hover-3d my-12 mx-2">
  <figure class="max-w-100 rounded-2xl">
    <img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="Tailwind CSS 3D card" />
  </figure>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

html

<div class="hover-3d my-12 mx-2">
  <figure class="max-w-100 rounded-2xl">
    <img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="Tailwind CSS 3D card" />
  </figure>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Rules

规则

hover-3d can be a
```
<div>
```
or a
```
<a>
```
hover-3d must have exactly 9 direct children where the first child is the main content and the other 8 children are empty
```
<div>
```
s for hover zones
content inside hover-3d should be non-interactive (no buttons, links, inputs, etc)

hover-3d 可以是
```
<div>
```
或
```
<a>
```
hover-3d 必须有恰好9个直接子元素，其中第一个子元素是主要内容，其他8个是空
```
<div>
```
作为悬停区域
hover-3d 内部的内容应为非交互式（无按钮、链接、输入框等）

hover-gallery

悬停画廊

Hover Gallery is container of images. The first image is visible be default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfoilios or in image galleries. Hover Gallery can include up to 10 images.

hover-gallery docs

悬停画廊是图片容器。默认显示第一张图片，水平悬停时会显示其他图片。悬停画廊适用于电商网站的产品卡片、作品集或图片画廊。悬停画廊最多可包含10张图片。

悬停画廊文档

Class names

类名

component:
```
hover-gallery
```

组件类：
```
hover-gallery
```

Syntax

语法

html

<figure class="hover-gallery max-w-60">
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
</figure>

html

<figure class="hover-gallery max-w-60">
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
  <img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
</figure>

Rules

规则

hover-gallery can be a
```
<div>
```
or a
```
<figure>
```
hover-gallery can include up to 10 images
hover-gallery needs a max width otherwise if fills the container width
images must be same dimensions for a proper alignment

hover-gallery 可以是
```
<div>
```
或
```
<figure>
```
hover-gallery 最多可包含10张图片
hover-gallery 需要设置最大宽度，否则会填充容器宽度
图片必须尺寸相同才能正确对齐

indicator

指示器

Indicators are used to place an element on the corner of another element

indicator docs

指示器用于在另一个元素的角落放置元素

指示器文档

Class names

类名

component:
```
indicator
```
part:
```
indicator-item
```

placement:

indicator-start

indicator-center

indicator-end

indicator-top

indicator-middle

indicator-bottom

组件类：
```
indicator
```
子部件类：
```
indicator-item
```

位置类：

indicator-start

indicator-center

indicator-end

indicator-top

indicator-middle

indicator-bottom

Syntax

语法

html

<div class="indicator">
  <span class="indicator-item">{indicator content}</span>
  <div>{main content}</div>
</div>

html

<div class="indicator">
  <span class="indicator-item">{indicator content}</span>
  <div>{main content}</div>
</div>

Rules

规则

Add all indicator elements (with
```
indicator-item
```
class) before the main content
{placement} is optional and can have one of each horizontal/vertical class names. default is
```
indicator-end indicator-top
```

在主要内容之前添加所有带有
```
indicator-item
```
类的指示器元素
{placement} 是可选的，可以使用任意一个水平/垂直位置类名。默认是
```
indicator-end indicator-top
```

input

文本输入框

Text Input is a simple input field

input docs

文本输入框是简单的输入字段

文本输入框文档

Class names

类名

component:
```
input
```
style:
```
input-ghost
```

color:

input-neutral

input-primary

input-secondary

input-accent

input-info

input-success

input-warning

input-error

size:

input-xs

input-sm

input-md

input-lg

input-xl

组件类：
```
input
```
样式类：
```
input-ghost
```

颜色类：

input-neutral

input-primary

input-secondary

input-accent

input-info

input-success

input-warning

input-error

尺寸类：

input-xs

input-sm

input-md

input-lg

input-xl

Syntax

语法

html

<input type="{type}" placeholder="Type here" class="input {MODIFIER}" />

html

<input type="{type}" placeholder="Type here" class="input {MODIFIER}" />

Rules

规则

{MODIFIER} is optional and can have one of each style/color/size class names
Can be used with any input field type (text, password, email, etc.)
Use
```
input
```
class for the parent when you have more than one element inside input

{MODIFIER} 是可选的，可以使用任意一个样式/颜色/尺寸类名
可用于任意输入字段类型（文本、密码、邮箱等）
当输入框内部有多个元素时，为父元素使用
```
input
```
类

join

组合容器

Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items

join docs

组合容器用于分组多个项目，可用于分组按钮、输入框等。组合容器为第一个和最后一个项目设置边框半径。组合容器可用于创建水平或垂直项目列表

组合容器文档

Class names

类名

component:
```
join
```
,
```
join-item
```
direction:
```
join-vertical
```
,
```
join-horizontal
```

组件类：
```
join
```
,
```
join-item
```
方向类：
```
join-vertical
```
,
```
join-horizontal
```

Syntax

语法

html

<div class="join {MODIFIER}">{CONTENT}</div>

html

<div class="join {MODIFIER}">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional and can have one of the direction class names
Any direct child of the join element will get joined together
Any element with
```
join-item
```
will be affected
Use
```
lg:join-horizontal
```
for responsive layouts

{MODIFIER} 是可选的，可以使用任意一个方向类名
join 元素的所有直接子元素会被组合在一起
所有带有
```
join-item
```
的元素会受到影响
使用
```
lg:join-horizontal
```
实现响应式布局

kbd

键盘按键

Kbd is used to display keyboard shortcuts

kbd docs

键盘按键用于显示快捷键

键盘按键文档

Class names

类名

component:
```
kbd
```
size:
```
kbd-xs
```
,
```
kbd-sm
```
,
```
kbd-md
```
,
```
kbd-lg
```
,
```
kbd-xl
```

组件类：
```
kbd
```
尺寸类：
```
kbd-xs
```
,
```
kbd-sm
```
,
```
kbd-md
```
,
```
kbd-lg
```
,
```
kbd-xl
```

Syntax

语法

html

<kbd class="kbd {MODIFIER}">K</kbd>

html

<kbd class="kbd {MODIFIER}">K</kbd>

Rules

规则

{MODIFIER} is optional and can have one of the size class names

{MODIFIER} 是可选的，可以使用任意一个尺寸类名

label

link

链接

Link adds the missing underline style to links

link docs

链接为链接添加缺失的下划线样式

链接文档

Class names

类名

component:
```
link
```
style:
```
link-hover
```

color:

link-neutral

link-primary

link-secondary

link-accent

link-success

link-info

link-warning

link-error

组件类：
```
link
```
样式类：
```
link-hover
```

颜色类：

link-neutral

link-primary

link-secondary

link-accent

link-success

link-info

link-warning

link-error

Syntax

语法

html

<a class="link {MODIFIER}">Click me</a>

html

<a class="link {MODIFIER}">Click me</a>

Rules

规则

{MODIFIER} is optional and can have one of the modifier class names

{MODIFIER} 是可选的，可以使用任意一个修饰符类名

list

列表

List is a vertical layout to display information in rows

list docs

列表是垂直布局，用于按行展示信息

列表文档

Class Names:

类名

Component:
```
list
```
,
```
list-row
```
Modifier:
```
list-col-wrap
```
,
```
list-col-grow
```

组件类：
```
list
```
,
```
list-row
```
修饰符类：
```
list-col-wrap
```
,
```
list-col-grow
```

Syntax

语法

html

<ul class="list">
  <li class="list-row">{CONTENT}</li>
</ul>

html

<ul class="list">
  <li class="list-row">{CONTENT}</li>
</ul>

Rules

规则

Use
```
list-row
```
for each item inside the list
By default, the second child of the
```
list-row
```
will fill the remaining space. You can use
```
list-col-grow
```
on another child to make it fill the remaining space instead
Use
```
list-col-wrap
```
to force an item to wrap to the next line

为列表中的每个项使用
```
list-row
```
默认情况下，
```
list-row
```
的第二个子元素会填充剩余空间。可以在另一个子元素上使用
```
list-col-grow
```
使其填充剩余空间
使用
```
list-col-wrap
```
强制项换行

loading

加载动画

Loading shows an animation to indicate that something is loading

loading docs

加载动画显示动画以指示正在加载

加载动画文档

Class names

类名

component:
```
loading
```

style:

loading-spinner

loading-dots

loading-ring

loading-ball

loading-bars

loading-infinity

size:

loading-xs

loading-sm

loading-md

loading-lg

loading-xl

组件类：
```
loading
```

样式类：

loading-spinner

loading-dots

loading-ring

loading-ball

loading-bars

loading-infinity

尺寸类：

loading-xs

loading-sm

loading-md

loading-lg

loading-xl

Syntax

语法

html

<span class="loading {MODIFIER}"></span>

html

<span class="loading {MODIFIER}"></span>

Rules

规则

{MODIFIER} is optional and can have one of the style/size class names

{MODIFIER} 是可选的，可以使用任意一个样式/尺寸类名

mask

遮罩

Mask crops the content of the element to common shapes

mask docs

遮罩将元素内容裁剪为常见形状

遮罩文档

Class names

类名

component:
```
mask
```

style:

mask-squircle

mask-heart

mask-hexagon

mask-hexagon-2

mask-decagon

mask-pentagon

mask-diamond

mask-square

mask-circle

mask-star

mask-star-2

mask-triangle

mask-triangle-2

mask-triangle-3

mask-triangle-4

modifier:
```
mask-half-1
```
,
```
mask-half-2
```

组件类：
```
mask
```

样式类：

mask-squircle

mask-heart

mask-hexagon

mask-hexagon-2

mask-decagon

mask-pentagon

mask-diamond

mask-square

mask-circle

mask-star

mask-star-2

mask-triangle

mask-triangle-2

mask-triangle-3

mask-triangle-4

修饰符类：
```
mask-half-1
```
,
```
mask-half-2
```

Syntax

语法

html

<img class="mask {MODIFIER}" src="{image-url}" />

html

<img class="mask {MODIFIER}" src="{image-url}" />

Rules

规则

{MODIFIER} is required and can have one of the style/modifier class names
You can change the shape of any element using
```
mask
```
class names
You can set custom sizes using
```
w-*
```
and
```
h-*
```

{MODIFIER} 是必填的，可以使用任意一个样式/修饰符类名
可以使用
```
mask
```
类名改变任意元素的形状
可以使用
```
w-*
```
和
```
h-*
```
设置自定义尺寸

菜单

Menu is used to display a list of links vertically or horizontally

menu docs

菜单用于垂直或水平显示链接列表

菜单文档

Class names

类名

component:
```
menu
```

part:

menu-title

menu-dropdown

menu-dropdown-toggle

modifier:

menu-disabled

menu-active

menu-focus

menu-dropdown-show

size:
```
menu-xs
```
,
```
menu-sm
```
,
```
menu-md
```
,
```
menu-lg
```
,
```
menu-xl
```
direction:
```
menu-vertical
```
,
```
menu-horizontal
```

组件类：
```
menu
```

子部件类：

menu-title

menu-dropdown

menu-dropdown-toggle

修饰符类：

menu-disabled

menu-active

menu-focus

menu-dropdown-show

尺寸类：
```
menu-xs
```
,
```
menu-sm
```
,
```
menu-md
```
,
```
menu-lg
```
,
```
menu-xl
```
方向类：
```
menu-vertical
```
,
```
menu-horizontal
```

Syntax

语法

Vertical menu:

html

<ul class="menu">
  <li><button>Item</button></li>
</ul>

Horizontal menu:

html

<ul class="menu menu-horizontal">
  <li><button>Item</button></li>
</ul>

垂直菜单：

html

<ul class="menu">
  <li><button>Item</button></li>
</ul>

水平菜单：

html

<ul class="menu menu-horizontal">
  <li><button>Item</button></li>
</ul>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/size/direction class names
Use
```
lg:menu-horizontal
```
for responsive layouts
Use
```
menu-title
```
for list item title
Use
```
<details>
```
tag to make submenus collapsible
Use
```
menu-dropdown
```
and
```
menu-dropdown-toggle
```
to toggle the dropdown using JS

{MODIFIER} 是可选的，可以使用任意一个修饰符/尺寸/方向类名
使用
```
lg:menu-horizontal
```
实现响应式布局
使用
```
menu-title
```
作为列表项标题
使用
```
<details>
```
标签使子菜单可折叠
使用
```
menu-dropdown
```
和
```
menu-dropdown-toggle
```
通过 JS 切换下拉菜单

mockup-browser

浏览器模拟

Browser mockup shows a box that looks like a browser window

mockup-browser docs

浏览器模拟显示一个看起来像浏览器窗口的容器

浏览器模拟文档

Class names

类名

component:
```
mockup-browser
```
part:
```
mockup-browser-toolbar
```

组件类：
```
mockup-browser
```
子部件类：
```
mockup-browser-toolbar
```

Syntax

语法

html

<div class="mockup-browser">
  <div class="mockup-browser-toolbar">
    {toolbar content}
  </div>
  <div>{CONTENT}</div>
</div>

html

<div class="mockup-browser">
  <div class="mockup-browser-toolbar">
    {toolbar content}
  </div>
  <div>{CONTENT}</div>
</div>

Rules

规则

For a default mockup, use just
```
mockup-browser
```
class name
To set a URL in toolbar, add a div with
```
input
```
class

要使用默认模拟，只需使用
```
mockup-browser
```
类名
要在工具栏中设置 URL，添加一个带有
```
input
```
类的 div

mockup-code

代码模拟

Code mockup is used to show a block of code in a box that looks like a code editor

mockup-code docs

代码模拟用于在看起来像代码编辑器的容器中显示代码块

代码模拟文档

Class names

类名

component:
```
mockup-code
```

组件类：
```
mockup-code
```

Syntax

语法

html

<div class="mockup-code">
  <pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>

html

<div class="mockup-code">
  <pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>

Rules

规则

Use
```
<pre data-prefix="{prefix}">
```
to show a prefix before each line
Use
```
<code>
```
tag to add code syntax highlighting (requires additional library)
To highlight a line, add background/text color

使用
```
<pre data-prefix="{prefix}">
```
在每行前显示前缀
使用
```
<code>
```
标签添加代码语法高亮（需要额外库）
要高亮某一行，添加背景/文本颜色

mockup-phone

手机模拟

Phone mockup shows a mockup of an iPhone

mockup-phone docs

手机模拟显示 iPhone 的模拟界面

手机模拟文档

Class names

类名

component:
```
mockup-phone
```
part:
```
mockup-phone-camera
```
,
```
mockup-phone-display
```

组件类：
```
mockup-phone
```
子部件类：
```
mockup-phone-camera
```
,
```
mockup-phone-display
```

Syntax

语法

html

<div class="mockup-phone">
  <div class="mockup-phone-camera"></div>
  <div class="mockup-phone-display">{CONTENT}</div>
</div>

html

<div class="mockup-phone">
  <div class="mockup-phone-camera"></div>
  <div class="mockup-phone-display">{CONTENT}</div>
</div>

Rules

规则

Inside
```
mockup-phone-display
```
you can add anything

在
```
mockup-phone-display
```
内部可以添加任意内容

mockup-window

窗口模拟

Window mockup shows a box that looks like an operating system window

mockup-window docs

窗口模拟显示一个看起来像操作系统窗口的容器

窗口模拟文档

Class names

类名

component:
```
mockup-window
```

组件类：
```
mockup-window
```

Syntax

语法

html

<div class="mockup-window">
  <div>{CONTENT}</div>
</div>

html

<div class="mockup-window">
  <div>{CONTENT}</div>
</div>

modal

模态框

Modal is used to show a dialog or a box when you click a button

modal docs

模态框用于点击按钮时显示对话框或容器

模态框文档

Class names

类名

component:
```
modal
```

part:

modal-box

modal-action

modal-backdrop

modal-toggle

modifier:
```
modal-open
```

placement:

modal-top

modal-middle

modal-bottom

modal-start

modal-end

组件类：
```
modal
```

子部件类：

modal-box

modal-action

modal-backdrop

modal-toggle

修饰符类：
```
modal-open
```

位置类：

modal-top

modal-middle

modal-bottom

modal-start

modal-end

Syntax

语法

Using HTML dialog element

html

<button onclick="my_modal.showModal()">Open modal</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">{CONTENT}</div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Using checkbox (legacy)

html

<label for="my-modal" class="btn">Open modal</label>
<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
  <div class="modal-box">{CONTENT}</div>
  <label class="modal-backdrop" for="my-modal">Close</label>
</div>

Using anchor links (legacy)

html

<a href="#my-modal" class="btn">Open modal</a>
<div class="modal" id="my-modal">
  <div class="modal-box">{CONTENT}</div>
</div>

使用 HTML dialog 元素：

html

<button onclick="my_modal.showModal()">Open modal</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">{CONTENT}</div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

使用复选框（旧版）：

html

<label for="my-modal" class="btn">Open modal</label>
<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
  <div class="modal-box">{CONTENT}</div>
  <label class="modal-backdrop" for="my-modal">Close</label>
</div>

使用锚链接（旧版）：

html

<a href="#my-modal" class="btn">Open modal</a>
<div class="modal" id="my-modal">
  <div class="modal-box">{CONTENT}</div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/placement class names
Add
```
tabindex="0"
```
to make modal focusable
Use unique IDs for each modal
For HTML dialog element modals, add
```
<form method="dialog">
```
for closing the modal with submit

{MODIFIER} 是可选的，可以使用任意一个修饰符/位置类名
添加
```
tabindex="0"
```
使模态框可聚焦
为每个模态框使用唯一 ID
对于 HTML dialog 元素模态框，添加
```
<form method="dialog">
```
用于提交关闭模态框

navbar

导航栏

Navbar is used to show a navigation bar on the top of the page

navbar docs

导航栏用于在页面顶部显示导航栏

导航栏文档

Class names

类名

component:
```
navbar
```
part:
```
navbar-start
```
,
```
navbar-center
```
,
```
navbar-end
```

组件类：
```
navbar
```
子部件类：
```
navbar-start
```
,
```
navbar-center
```
,
```
navbar-end
```

Syntax

语法

html

<div class="navbar">{CONTENT}</div>

html

<div class="navbar">{CONTENT}</div>

Rules

规则

use
```
navbar-start
```
,
```
navbar-center
```
,
```
navbar-end
```
to position content horizontally
put anything inside each section
suggestion - use
```
base-200
```
for background color

使用
```
navbar-start
```
,
```
navbar-center
```
,
```
navbar-end
```
水平定位内容
在每个区域内放置任意内容
建议 - 使用
```
base-200
```
作为背景色

pagination

分页

Pagination is a group of buttons

pagination docs

分页是一组按钮

分页文档

Class names

类名

component:
```
join
```
part:
```
join-item
```
direction:
```
join-vertical
```
,
```
join-horizontal
```

组件类：
```
join
```
子部件类：
```
join-item
```
方向类：
```
join-vertical
```
,
```
join-horizontal
```

Syntax

语法

html

<div class="join">{CONTENT}</div>

html

<div class="join">{CONTENT}</div>

Rules

规则

Use
```
join-item
```
for each button or link inside the pagination
Use
```
btn
```
class for styling pagination items

为分页内的每个按钮或链接使用
```
join-item
```
使用
```
btn
```
类设置分页项样式

progress

进度条

Progress bar can be used to show the progress of a task or to show the passing of time

progress docs

进度条用于显示任务进度或时间流逝

进度条文档

Class names

类名

component:
```
progress
```

color:

progress-neutral

progress-primary

progress-secondary

progress-accent

progress-info

progress-success

progress-warning

progress-error

组件类：
```
progress
```

颜色类：

progress-neutral

progress-primary

progress-secondary

progress-accent

progress-info

progress-success

progress-warning

progress-error

Syntax

语法

html

<progress class="progress {MODIFIER}" value="50" max="100"></progress>

html

<progress class="progress {MODIFIER}" value="50" max="100"></progress>

Rules

规则

{MODIFIER} is optional and can have one of the color class names
You must specify value and max attributes

{MODIFIER} 是可选的，可以使用任意一个颜色类名
必须指定 value 和 max 属性

radial-progress

环形进度条

Radial progress can be used to show the progress of a task or to show the passing of time

radial-progress docs

环形进度条用于显示任务进度或时间流逝

环形进度条文档

Class names

类名

component:
```
radial-progress
```

组件类：
```
radial-progress
```

Syntax

语法

html

<div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>

html

<div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>

Rules

规则

The
```
--value
```
CSS variable and text must be a number between 0 and 100
you need to add
```
aria-valuenow="{value}"
```
,
```
aria-valuenow={value}
```
so screen readers can properly read value and also show that its a progress element to them
Use
```
div
```
instead of progress because browsers can't show text inside progress tag
Use
```
--size
```
for setting size (default 5rem) and
```
--thickness
```
to set how thick the indicator is

```
--value
```
CSS 变量和文本必须是 0 到 100 之间的数字
需要添加
```
aria-valuenow="{value}"
```
，以便屏幕阅读器正确读取值，并识别其为进度元素
使用
```
div
```
而非 progress，因为浏览器无法在 progress 标签内显示文本
使用
```
--size
```
设置尺寸（默认 5rem），使用
```
--thickness
```
设置指示器的粗细

radio

单选按钮

Radio buttons allow the user to select one option

radio docs

单选按钮允许用户选择一个选项

单选按钮文档

Class names

类名

component:
```
radio
```

color:

radio-neutral

radio-primary

radio-secondary

radio-accent

radio-success

radio-warning

radio-info

radio-error

size:

radio-xs

radio-sm

radio-md

radio-lg

radio-xl

组件类：
```
radio
```

颜色类：

radio-neutral

radio-primary

radio-secondary

radio-accent

radio-success

radio-warning

radio-info

radio-error

尺寸类：

radio-xs

radio-sm

radio-md

radio-lg

radio-xl

Syntax

语法

html

<input type="radio" name="{name}" class="radio {MODIFIER}" />

html

<input type="radio" name="{name}" class="radio {MODIFIER}" />

Rules

规则

{MODIFIER} is optional and can have one of the size/color class names
Replace {name} with a unique name for the radio group
Each set of radio inputs should have unique
```
name
```
attributes to avoid conflicts with other sets of radio inputs on the same page

{MODIFIER} 是可选的，可以使用任意一个尺寸/颜色类名
将 {name} 替换为单选按钮组的唯一名称
每组单选输入应具有唯一的
```
name
```
属性，避免与页面上其他单选输入组冲突

range

范围滑块

Range slider is used to select a value by sliding a handle

range docs

范围滑块用于通过滑动手柄选择值

范围滑块文档

Class names

类名

component:
```
range
```

color:

range-neutral

range-primary

range-secondary

range-accent

range-success

range-warning

range-info

range-error

size:

range-xs

range-sm

range-md

range-lg

range-xl

组件类：
```
range
```

颜色类：

range-neutral

range-primary

range-secondary

range-accent

range-success

range-warning

range-info

range-error

尺寸类：

range-xs

range-sm

range-md

range-lg

range-xl

Syntax

语法

html

<input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />

html

<input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />

Rules

规则

{MODIFIER} is optional and can have one of each color/size class names
You must specify
```
min
```
and
```
max
```
attributes

{MODIFIER} 是可选的，可以使用任意一个颜色/尺寸类名
必须指定
```
min
```
和
```
max
```
属性

rating

评分

Rating is a set of radio buttons that allow the user to rate something

rating docs

评分是一组单选按钮，允许用户对事物进行评分

评分文档

Class names

类名

component:
```
rating
```
modifier:
```
rating-half
```
,
```
rating-hidden
```

size:

rating-xs

rating-sm

rating-md

rating-lg

rating-xl

组件类：
```
rating
```
修饰符类：
```
rating-half
```
,
```
rating-hidden
```

尺寸类：

rating-xs

rating-sm

rating-md

rating-lg

rating-xl

Syntax

语法

html

<div class="rating {MODIFIER}">
  <input type="radio" name="rating-1" class="mask mask-star" />
</div>

html

<div class="rating {MODIFIER}">
  <input type="radio" name="rating-1" class="mask mask-star" />
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/size class names
Each set of rating inputs should have unique
```
name
```
attributes to avoid conflicts with other ratings on the same page
Add
```
rating-hidden
```
for the first radio to make it hidden so user can clear the rating

{MODIFIER} 是可选的，可以使用任意一个修饰符/尺寸类名
每组评分输入应具有唯一的
```
name
```
属性，避免与页面上其他评分冲突
为第一个单选按钮添加
```
rating-hidden
```
使其隐藏，以便用户清除评分

select

选择框

Select is used to pick a value from a list of options

select docs

选择框用于从选项列表中选择值

选择框文档

Class names

类名

component:
```
select
```
style:
```
select-ghost
```

color:

select-neutral

select-primary

select-secondary

select-accent

select-info

select-success

select-warning

select-error

size:

select-xs

select-sm

select-md

select-lg

select-xl

组件类：
```
select
```
样式类：
```
select-ghost
```

颜色类：

select-neutral

select-primary

select-secondary

select-accent

select-info

select-success

select-warning

select-error

尺寸类：

select-xs

select-sm

select-md

select-lg

select-xl

Syntax

语法

html

<select class="select {MODIFIER}">
  <option>Option</option>
</select>

html

<select class="select {MODIFIER}">
  <option>Option</option>
</select>

Rules

规则

{MODIFIER} is optional and can have one of each style/color/size class names

{MODIFIER} 是可选的，可以使用任意一个样式/颜色/尺寸类名

skeleton

骨架屏

Skeleton is a component that can be used to show a loading state

skeleton docs

骨架屏用于显示加载状态

骨架屏文档

Class names

类名

component:
```
skeleton
```
modifier:
```
skeleton-text
```

组件类：
```
skeleton
```
修饰符类：
```
skeleton-text
```

Syntax

语法

html

<div class="skeleton"></div>

Example with text skeleton:

html

<div class="skeleton skeleton-text">Loading data...</div>

html

<div class="skeleton"></div>

文本骨架屏示例：

html

<div class="skeleton skeleton-text">Loading data...</div>

Rules

规则

Add
```
h-*
```
and
```
w-*
```
utility classes to set height and width

添加
```
h-*
```
和
```
w-*
```
工具类设置高度和宽度

stack

堆叠容器

Stack visually puts elements on top of each other

stack docs

堆叠容器将元素视觉上堆叠在一起

堆叠容器文档

Class Names:

类名

Component:
```
stack
```

Modifier:

stack-top

stack-bottom

stack-start

stack-end

组件类：
```
stack
```

修饰符类：

stack-top

stack-bottom

stack-start

stack-end

Syntax

语法

html

<div class="stack {MODIFIER}">{CONTENT}</div>

html

<div class="stack {MODIFIER}">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier class names
You can use
```
w-*
```
and
```
h-*
```
classes to set the width and height of the stack, making all items the same size

{MODIFIER} 是可选的，可以使用任意一个修饰符类名
可以使用
```
w-*
```
和
```
h-*
```
类设置堆叠容器的宽度和高度，使所有项尺寸相同

stat

统计卡片

Stat is used to show numbers and data in a block

stat docs

统计卡片用于在容器中显示数字和数据

统计卡片文档

Class names

类名

Component:
```
stats
```

Part:

stat

stat-title

stat-value

stat-desc

stat-figure

stat-actions

Direction:
```
stats-horizontal
```
,
```
stats-vertical
```

组件类：
```
stats
```

子部件类：

stat

stat-title

stat-value

stat-desc

stat-figure

stat-actions

方向类：
```
stats-horizontal
```
,
```
stats-vertical
```

Syntax

语法

html

<div class="stats {MODIFIER}">
  <div class="stat">{CONTENT}</div>
</div>

html

<div class="stats {MODIFIER}">
  <div class="stat">{CONTENT}</div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the direction class names
It's horizontal by default but you can make it vertical with the
```
stats-vertical
```
class
Content includes
```
stat-title
```
,
```
stat-value
```
,
```
stat-desc
```
inside a
```
stat
```

{MODIFIER} 是可选的，可以使用任意一个方向类名
默认是水平布局，但可以使用
```
stats-vertical
```
类改为垂直布局
内容包含
```
stat
```
内部的
```
stat-title
```
,
```
stat-value
```
,
```
stat-desc
```

status

状态指示器

Status is a really small icon to visually show the current status of an element, like online, offline, error, etc

status docs

状态指示器是非常小的图标，用于直观显示元素的当前状态，如在线、离线、错误等

状态指示器文档

Class Names:

类名

Component:
```
status
```

Color:

status-neutral

status-primary

status-secondary

status-accent

status-info

status-success

status-warning

status-error

Size:

status-xs

status-sm

status-md

status-lg

status-xl

组件类：
```
status
```

颜色类：

status-neutral

status-primary

status-secondary

status-accent

status-info

status-success

status-warning

status-error

尺寸类：

status-xs

status-sm

status-md

status-lg

status-xl

Syntax

语法

html

<span class="status {MODIFIER}"></span>

html

<span class="status {MODIFIER}"></span>

Rules

规则

{MODIFIER} is optional and can have one of the color/size class names
This component does not render anything visible

{MODIFIER} 是可选的，可以使用任意一个颜色/尺寸类名
该组件本身不渲染可见内容

steps

步骤条

Steps can be used to show a list of steps in a process

steps docs

步骤条用于显示流程中的步骤列表

步骤条文档

Class Names:

类名

Component:
```
steps
```
Part:
```
step
```
,
```
step-icon
```

Color:

step-neutral

step-primary

step-secondary

step-accent

step-info

step-success

step-warning

step-error

Direction:
```
steps-vertical
```
,
```
steps-horizontal
```

组件类：
```
steps
```
子部件类：
```
step
```
,
```
step-icon
```

颜色类：

step-neutral

step-primary

step-secondary

step-accent

step-info

step-success

step-warning

step-error

方向类：
```
steps-vertical
```
,
```
steps-horizontal
```

Syntax

语法

html

<ul class="steps {MODIFIER}">
  <li class="step">{step content}</li>
</ul>

html

<ul class="steps {MODIFIER}">
  <li class="step">{step content}</li>
</ul>

Rules

规则

{MODIFIER} is optional and can have one of each direction/color class names
To make a step active, add the
```
step-primary
```
class
You can add an icon in each step using
```
step-icon
```
class
To display data in
```
data-content
```
,use
```
data-content="{value}"
```
at the
```
<li>
```

{MODIFIER} 是可选的，可以使用任意一个方向/颜色类名
要使步骤处于激活状态，添加
```
step-primary
```
类
可以使用
```
step-icon
```
类在每个步骤中添加图标
要在
```
data-content
```
中显示数据，在
```
<li>
```
上使用
```
data-content="{value}"
```

swap

切换器

Swap allows you to toggle the visibility of two elements using a checkbox or a class name

swap docs

切换器允许使用复选框或类名切换两个元素的可见性

切换器文档

Class Names:

类名

Component:
```
swap
```
Part:
```
swap-on
```
,
```
swap-off
```
,
```
swap-indeterminate
```
Modifier:
```
swap-active
```
Style:
```
swap-rotate
```
,
```
swap-flip
```

组件类：
```
swap
```
子部件类：
```
swap-on
```
,
```
swap-off
```
,
```
swap-indeterminate
```
修饰符类：
```
swap-active
```
样式类：
```
swap-rotate
```
,
```
swap-flip
```

Syntax

语法

Using checkbox

html

<label class="swap {MODIFIER}">
  <input type="checkbox" />
  <div class="swap-on">{content when active}</div>
  <div class="swap-off">{content when inactive}</div>
</label>

Using class name

html

<div class="swap {MODIFIER}">
  <div class="swap-on">{content when active}</div>
  <div class="swap-off">{content when inactive}</div>
</div>

使用复选框：

html

<label class="swap {MODIFIER}">
  <input type="checkbox" />
  <div class="swap-on">{content when active}</div>
  <div class="swap-off">{content when inactive}</div>
</label>

使用类名：

html

<div class="swap {MODIFIER}">
  <div class="swap-on">{content when active}</div>
  <div class="swap-off">{content when inactive}</div>
</div>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/style class names
Use only a hidden checkbox to control swap state or add/remove the
```
swap-active
```
class using JS to control state
To show something when the checkbox is indeterminate, use
```
swap-indeterminate
```
class

{MODIFIER} 是可选的，可以使用任意一个修饰符/样式类名
使用隐藏复选框控制切换状态，或使用 JS 添加/移除
```
swap-active
```
类控制状态
要在复选框处于不确定状态时显示内容，使用
```
swap-indeterminate
```
类

tab

标签页

Tabs can be used to show a list of links in a tabbed format

tab docs

标签页用于以标签格式显示链接列表

标签页文档

Class Names:

类名

Component:
```
tabs
```
Part:
```
tab
```
,
```
tab-content
```
Style:
```
tabs-box
```
,
```
tabs-border
```
,
```
tabs-lift
```
Modifier:
```
tab-active
```
,
```
tab-disabled
```
Placement:
```
tabs-top
```
,
```
tabs-bottom
```

组件类：
```
tabs
```
子部件类：
```
tab
```
,
```
tab-content
```
样式类：
```
tabs-box
```
,
```
tabs-border
```
,
```
tabs-lift
```
修饰符类：
```
tab-active
```
,
```
tab-disabled
```
位置类：
```
tabs-top
```
,
```
tabs-bottom
```

Syntax

语法

Using buttons:

html

<div role="tablist" class="tabs {MODIFIER}">
  <button role="tab" class="tab">Tab</button>
</div>

Using radio inputs:

html

<div role="tablist" class="tabs tabs-box">
  <input type="radio" name="my_tabs" class="tab" aria-label="Tab" />
</div>

使用按钮：

html

<div role="tablist" class="tabs {MODIFIER}">
  <button role="tab" class="tab">Tab</button>
</div>

使用单选输入：

html

<div role="tablist" class="tabs tabs-box">
  <input type="radio" name="my_tabs" class="tab" aria-label="Tab" />
</div>

Rules

规则

{MODIFIER} is optional and can have one of the style/size class names
Radio inputs are needed for tab content to work with tab click
If tabs gets a background then every tab inside it becomes rounded from both top corners

{MODIFIER} 是可选的，可以使用任意一个样式/尺寸类名
需要单选输入才能使标签内容与标签点击联动
如果标签页设置了背景，内部的每个标签顶部两个角都会变成圆角

table

表格

Table can be used to show a list of data in a table format

table docs

表格用于以表格格式显示数据列表

表格文档

Class Names:

类名

Component:
```
table
```
Modifier:
```
table-zebra
```
,
```
table-pin-rows
```
,
```
table-pin-cols
```

Size:

table-xs

table-sm

table-md

table-lg

table-xl

组件类：
```
table
```
修饰符类：
```
table-zebra
```
,
```
table-pin-rows
```
,
```
table-pin-cols
```

尺寸类：

table-xs

table-sm

table-md

table-lg

table-xl

Syntax

语法

html

<div class="overflow-x-auto">
  <table class="table {MODIFIER}">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th>
      </tr>
    </tbody>
  </table>
</div>

html

<div class="overflow-x-auto">
  <table class="table {MODIFIER}">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th>
      </tr>
    </tbody>
  </table>
</div>

Rules

规则

{MODIFIER} is optional and can have one of each modifier/size class names
The
```
overflow-x-auto
```
class is added to the wrapper div to make the table horizontally scrollable on smaller screens

{MODIFIER} 是可选的，可以使用任意一个修饰符/尺寸类名
为包装 div 添加
```
overflow-x-auto
```
类，使表格在小屏幕上可水平滚动

text-rotate

文本轮播

Text Rotate can show up to 6 lines of text, one at a time, with a an infinite loop animation. Duration is 10 seconds by default. The animation will pause on hover.

textarea docs

文本轮播最多可显示6行文本，每次显示一行，无限循环动画。默认持续时间为10秒。悬停时动画会暂停。

文本轮播文档

Class Names:

类名

Component:
```
text-rotate
```

组件类：
```
text-rotate
```

Syntax

语法

html

<span class="text-rotate">
  <span>
    <span>Word 1</span>
    <span>Word 2</span>
    <span>Word 3</span>
    <span>Word 4</span>
    <span>Word 5</span>
    <span>Word 6</span>
  </span>
</span>

Example: Big font size, horizontally centered

html

<span class="text-rotate max-md:text-3xl text-7xl font-title">
  <span class="justify-items-center">
    <span>DESIGN</span>
    <span>DEVELOP</span>
    <span>DEPLOY</span>
    <span>SCALE</span>
    <span>MAINTAIN</span>
    <span>REPEAT</span>
  </span>
</span>

Rotating words in a sentence, different colors for each word

html

<span>
  Providing AI Agents for 
  <span class="text-rotate">
    <span>
      <span class="bg-teal-400 text-teal-800 px-2">Designers</span>
      <span class="bg-red-400 text-red-800 px-2">Developers</span>
      <span class="bg-blue-400 text-blue-800 px-2">Managers</span>
    </span>
  </span>
</span>

Custom line height in case you have a tall font or need more vertical spacing between lines

html

<span class="text-rotate max-md:text-3xl text-7xl font-title leading-[2]">
  <span class="justify-items-center">
    <span>📐 DESIGN</span>
    <span>⌨️ DEVELOP</span>
    <span>🌎 DEPLOY</span>
    <span>🌱 SCALE</span>
    <span>🔧 MAINTAIN</span>
    <span>♻️ REPEAT</span>
  </span>
</span>

html

<span class="text-rotate">
  <span>
    <span>Word 1</span>
    <span>Word 2</span>
    <span>Word 3</span>
    <span>Word 4</span>
    <span>Word 5</span>
    <span>Word 6</span>
  </span>
</span>

示例：大字体，水平居中

html

<span class="text-rotate max-md:text-3xl text-7xl font-title">
  <span class="justify-items-center">
    <span>DESIGN</span>
    <span>DEVELOP</span>
    <span>DEPLOY</span>
    <span>SCALE</span>
    <span>MAINTAIN</span>
    <span>REPEAT</span>
  </span>
</span>

句子中轮播的单词，每个单词颜色不同

html

<span>
  Providing AI Agents for 
  <span class="text-rotate">
    <span>
      <span class="bg-teal-400 text-teal-800 px-2">Designers</span>
      <span class="bg-red-400 text-red-800 px-2">Developers</span>
      <span class="bg-blue-400 text-blue-800 px-2">Managers</span>
    </span>
  </span>
</span>

自定义行高，适用于高字体或需要更多垂直间距的情况

html

<span class="text-rotate max-md:text-3xl text-7xl font-title leading-[2]">
  <span class="justify-items-center">
    <span>📐 DESIGN</span>
    <span>⌨️ DEVELOP</span>
    <span>🌎 DEPLOY</span>
    <span>🌱 SCALE</span>
    <span>🔧 MAINTAIN</span>
    <span>♻️ REPEAT</span>
  </span>
</span>

Rules

规则

```
text-rotate
```
must have one span or div inside it that contains 2 to 6 spans/divs for each line of text
Total duration of the loop is 10000 milliseconds by default
You can set custom duration using
```
duration-{value}
```
utility class, where value is in milliseconds (e.g.
```
duration-12000
```
for 12 seconds)

```
text-rotate
```
内部必须有一个 span 或 div，其中包含2到6个 span/div 作为每行文本
默认循环总时长为10000毫秒
可以使用
```
duration-{value}
```
工具类设置自定义时长，其中 value 以毫秒为单位（例如
```
duration-12000
```
表示12秒）

textarea

文本域

Textarea allows users to enter text in multiple lines

textarea docs

文本域允许用户输入多行文本

文本域文档

Class Names:

类名

Component:
```
textarea
```
Style:
```
textarea-ghost
```

Color:

textarea-neutral

textarea-primary

textarea-secondary

textarea-accent

textarea-info

textarea-success

textarea-warning

textarea-error

Size:

textarea-xs

textarea-sm

textarea-md

textarea-lg

textarea-xl

组件类：
```
textarea
```
样式类：
```
textarea-ghost
```

颜色类：

textarea-neutral

textarea-primary

textarea-secondary

textarea-accent

textarea-info

textarea-success

textarea-warning

textarea-error

尺寸类：

textarea-xs

textarea-sm

textarea-md

textarea-lg

textarea-xl

Syntax

语法

html

<textarea class="textarea {MODIFIER}" placeholder="Bio"></textarea>

html

<textarea class="textarea {MODIFIER}" placeholder="Bio"></textarea>

Rules

规则

{MODIFIER} is optional and can have one of each style/color/size class names

{MODIFIER} 是可选的，可以使用任意一个样式/颜色/尺寸类名

theme-controller

主题控制器

If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value

theme-controller docs

如果页面中存在带有 theme-controller 类的已勾选复选框或已勾选单选框，页面将使用该输入框值对应的主题

主题控制器文档

Class names

类名

component:
```
theme-controller
```

组件类：
```
theme-controller
```

Syntax

语法

html

<input type="checkbox" value="{theme-name}" class="theme-controller" />

html

<input type="checkbox" value="{theme-name}" class="theme-controller" />

Rules

规则

The value attribute of the input element should be a valid daisyUI theme name

输入元素的 value 属性应为有效的 daisyUI 主题名称

timeline

时间线

Timeline component shows a list of events in chronological order

timeline docs

时间线组件按时间顺序显示事件列表

时间线文档

Class Names:

类名

Component:
```
timeline
```

Part:

timeline-start

timeline-middle

timeline-end

Modifier:

timeline-snap-icon

timeline-box

timeline-compact

Direction:
```
timeline-vertical
```
,
```
timeline-horizontal
```

组件类：
```
timeline
```

子部件类：

timeline-start

timeline-middle

timeline-end

修饰符类：

timeline-snap-icon

timeline-box

timeline-compact

方向类：
```
timeline-vertical
```
,
```
timeline-horizontal
```

Syntax

语法

html

<ul class="timeline {MODIFIER}">
  <li>
    <div class="timeline-start">{start}</div>
    <div class="timeline-middle">{icon}</div>
    <div class="timeline-end">{end}</div>
  </li>
</ul>

html

<ul class="timeline {MODIFIER}">
  <li>
    <div class="timeline-start">{start}</div>
    <div class="timeline-middle">{icon}</div>
    <div class="timeline-end">{end}</div>
  </li>
</ul>

Rules

规则

{MODIFIER} is optional and can have one of the modifier/direction class names
To make a vertical timeline, add the
```
timeline-vertical
```
class to the
```
ul
```
element or just do nothing (because its the default style.)
Add
```
timeline-snap-icon
```
to snap the icon to the start instead of middle
Add the
```
timeline-compact
```
class to force all items on one side

{MODIFIER} 是可选的，可以使用任意一个修饰符/方向类名
要创建垂直时间线，为
```
ul
```
元素添加
```
timeline-vertical
```
类，或不做任何操作（因为这是默认样式）
添加
```
timeline-snap-icon
```
将图标对齐到起始位置而非中间
添加
```
timeline-compact
```
类强制所有项显示在一侧

toast

提示框容器

Toast is a wrapper to stack elements, positioned on the corner of page

toast docs

提示框容器用于堆叠元素，固定在页面角落

提示框容器文档

Class Names:

类名

Component:
```
toast
```

Placement:

toast-start

toast-center

toast-end

toast-top

toast-middle

toast-bottom

组件类：
```
toast
```

位置类：

toast-start

toast-center

toast-end

toast-top

toast-middle

toast-bottom

Syntax

语法

html

<div class="toast {MODIFIER}">{CONTENT}</div>

html

<div class="toast {MODIFIER}">{CONTENT}</div>

Rules

规则

{MODIFIER} is optional and can have one of the placement class names

{MODIFIER} 是可选的，可以使用任意一个位置类名

toggle

开关

Toggle is a checkbox that is styled to look like a switch button

toggle docs

开关是样式化为切换按钮的复选框

开关文档

Class Names:

类名

Component:
```
toggle
```

Color:

toggle-primary

toggle-secondary

toggle-accent

toggle-neutral

toggle-success

toggle-warning

toggle-info

toggle-error

Size:

toggle-xs

toggle-sm

toggle-md

toggle-lg

toggle-xl

组件类：
```
toggle
```

颜色类：

toggle-primary

toggle-secondary

toggle-accent

toggle-neutral

toggle-success

toggle-warning

toggle-info

toggle-error

尺寸类：

toggle-xs

toggle-sm

toggle-md

toggle-lg

toggle-xl

Syntax

语法

html

<input type="checkbox" class="toggle {MODIFIER}" />

html

<input type="checkbox" class="toggle {MODIFIER}" />

Rules

规则

{MODIFIER} is optional and can have one of each color/size class names

{MODIFIER} 是可选的，可以使用任意一个颜色/尺寸类名

tooltip

工具提示

Tooltip can be used to show a message when hovering over an element

tooltip docs

工具提示用于悬停元素时显示消息

工具提示文档

Class names

类名

component:
```
tooltip
```
part:
```
tooltip-content
```
modifier:
```
tooltip-open
```

placement:

tooltip-top

tooltip-bottom

tooltip-left

tooltip-right

color:

tooltip-primary

tooltip-secondary

tooltip-accent

tooltip-info

tooltip-success

tooltip-warning

tooltip-error

组件类：
```
tooltip
```
子部件类：
```
tooltip-content
```
修饰符类：
```
tooltip-open
```

位置类：

tooltip-top

tooltip-bottom

tooltip-left

tooltip-right

颜色类：

tooltip-primary

tooltip-secondary

tooltip-accent

tooltip-info

tooltip-success

tooltip-warning

tooltip-error

Syntax

语法

html

<div class="tooltip {MODIFIER}" data-tip="Tooltip text">
  <button class="btn">Hover me</button>
</div>

html

<div class="tooltip {MODIFIER}" data-tip="Tooltip text">
  <button class="btn">Hover me</button>
</div>

Rules

规则

{MODIFIER} is optional and can have one of each modifier/placement/color class names

{MODIFIER} 是可选的，可以使用任意一个修饰符/位置/颜色类名

validator

验证器

Validator class changes the color of form elements to error or success based on input's validation rules

validator docs

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

验证器文档

Class names

类名

component:
```
validator
```
part:
```
validator-hint
```

组件类：
```
validator
```
子部件类：
```
validator-hint
```

Syntax

语法

html

<input type="{type}" class="input validator" required />
<p class="validator-hint">Error message</p>

html

<input type="{type}" class="input validator" required />
<p class="validator-hint">Error message</p>

Rules

规则

Use with
```
input
```
,
```
select
```
,
```
textarea
```

与
```
input
```
,
```
select
```
,
```
textarea
```
配合使用