daisyUI 5 — Complete Implementation Guide

A start-to-finish reference for building production UIs with daisyUI 5 and Tailwind CSS 4. Covers every component, every class, theming, configuration, and best practices.

Meta	Detail
daisyUI version	5.5.x
Tailwind CSS version	4.x
License	MIT
Official docs	daisyui.com
GitHub	github.com/saadeghi/daisyui
LLM reference	daisyui.com/llms.txt
Theme generator	daisyui.com/theme-generator
Playground	daisyui.com/tailwindplay

Introduction
- 1A. Usage Rules
Installation
Configuration
Color System
Theming
Customization
Utility Classes & CSS Variables
- 7A. Base Styles
- 7B. Layout & Typography
Components — Actions
Components — Data Display
Components — Navigation
Components — Feedback
Components — Data Input
Components — Layout
Components — Mockups
Responsive Design Patterns
Best Practices

1. Introduction

Official docs: https://daisyui.com/docs/intro/

daisyUI is a pure-CSS component library that sits on top of Tailwind CSS as a plugin. It provides semantic, high-level class names — btn, card, toggle, modal — so you write dramatically less markup while retaining full customization through Tailwind utility classes.

Key principles:

Semantic class names — Name elements by what they are (btn, card), not how they look (bg-blue-500 px-4 py-2).
Pure CSS, zero JS — No JavaScript dependency. Works with any framework or no framework at all.
Tailwind-native customization — Every daisyUI component can be further styled with any Tailwind utility.
Theme-driven design — Colors are CSS variables that change with the active theme, giving you dark mode and 35 built-in themes for free.
Zero dependencies — daisyUI 5 ships with no npm dependencies.

Class name taxonomy (for reference only — not used in code):

Type	Purpose	Example
`component`	The required base class	`btn`, `card`, `modal`
`part`	A child element of a component	`card-body`, `modal-box`
`style`	A visual variant	`btn-outline`, `alert-soft`
`color`	Sets a semantic color	`btn-primary`, `badge-error`
`size`	Sets a size	`btn-lg`, `input-sm`
`modifier`	Changes behavior or shape	`btn-circle`, `collapse-arrow`
`placement`	Positions the component	`dropdown-end`, `toast-top`
`direction`	Controls axis	`join-vertical`, `divider-horizontal`
`behavior`	Controls interactive state	`btn-active`, `btn-disabled`
`variant`	Conditional prefix	`is-drawer-open:`, `dark:`

1A. Usage Rules

Source: daisyui.com/llms.txt

These rules govern how daisyUI classes should be applied. They're designed as guardrails for both humans and AI code generation.

Style by composing class names. Give an element a component class, then optionally add part classes, modifier classes, color classes, and size classes. Example: btn btn-primary btn-lg btn-outline.
Customize with Tailwind utilities. If daisyUI doesn't offer a modifier for what you need, add Tailwind utility classes alongside. Example: btn px-10 for custom padding.
Use ! as a last resort for specificity. If a Tailwind utility doesn't override a daisyUI style, append ! to force it. Example: btn bg-red-500!. Use sparingly.
Build your own if it doesn't exist. If a component or pattern doesn't exist in daisyUI, create it using Tailwind CSS utility classes directly.
Make layouts responsive. When using Tailwind's flex and grid, always apply responsive prefixes (sm:, md:, lg:, xl:, 2xl:).
Only use daisyUI or Tailwind classes. The only allowed class names are existing daisyUI class names or Tailwind CSS utility classes. No custom class names unless using @utility.
Avoid writing custom CSS. Using daisyUI class names or Tailwind CSS utility classes is always preferred over custom CSS.
Use picsum.photos for placeholder images. https://picsum.photos/{width}/{height} with whatever size you need.
Don't add custom fonts unless necessary. daisyUI themes include appropriate font settings.
Don't add bg-base-100 text-base-content to <body> unless necessary — it's inherited from the theme's root styles.
For design decisions, follow Refactoring UI best practices (by Adam Wathan & Steve Schoger) — spacing, typography hierarchy, color usage, and visual weight.

2. Installation

Official docs: daisyui.com/docs/install

2.1 Node package install

daisyUI 5 requires Tailwind CSS 4. There is no tailwind.config.js — Tailwind 4 is configured entirely via CSS.

# npm
npm i -D daisyui@latest

# pnpm
pnpm add -D daisyui@latest

# yarn
yarn add -D daisyui@latest

# bun
bun add -D daisyui@latest

# deno
deno i -D npm:daisyui@latest

Then in your main CSS file:

/* app.css */
@import "tailwindcss";
@plugin "daisyui";

That's it. All daisyUI components and the light + dark themes are now available.

2.2 CDN (no build step)

Official docs: daisyui.com/docs/cdn

For prototyping or server-rendered projects (Rails, Django, PHP, WordPress, HTMX, Alpine.js):

<!-- In your <head> -->
<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>

The compressed CDN CSS file (daisyui.css) is ~42 kB and includes all components but only the light and dark themes.

To get all 35 themes on CDN, add the themes.css file:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

Cherry-pick components for smaller bundles using jsDelivr's combine endpoint:

<link href="https://cdn.jsdelivr.net/combine/npm/daisyui@5/base/reset.css,npm/daisyui@5/base/properties.css,npm/daisyui@5/base/rootcolor.css,npm/daisyui@5/components/button.css,npm/daisyui@5/components/toggle.css,npm/daisyui@5/theme/light.css" rel="stylesheet" type="text/css" />

CDN limitations:

is-drawer-open: and is-drawer-close: variant class names are not included in CDN files (they'd make the file too large).
Every component, theme, and base style is available as an individual CSS file at https://cdn.jsdelivr.net/npm/daisyui@5/.

2.3 Individual component CSS (no Tailwind needed)

For projects that only need specific components:

<!-- Only the toggle component -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/toggle.css" rel="stylesheet" />

Every component, theme, and library part is available as an individual compressed CSS file.

2.4 Framework install guides

daisyUI provides step-by-step install tutorials for 35+ frameworks:

Category	Frameworks
Build tools	Vite, Tailwind CLI, Standalone (no Node), PostCSS, Rsbuild
React ecosystem	React, Next.js, React Router, Preact, Waku
Vue ecosystem	Vue, Nuxt
Svelte	SvelteKit
Other JS	Astro, Solid, Solid Start, Qwik, Angular, Ember, Lit, Vike, Eleventy
Server-side	Laravel, Rails, Elixir Phoenix, Django
Other	HTMX, WordPress, Electron, Bun dev server, Elysia, Deno Fresh, UnoCSS, Zola
Non-JS (Rust/WASM)	Dioxus, Yew

3. Configuration

Official docs: https://daisyui.com/docs/config/

Configuration is done by adding brackets {} after @plugin "daisyui" in your CSS file.

3.1 Default configuration

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

3.2 Configuration options

Option	Default	Description
`themes`	`light --default, dark --prefersdark`	Comma-separated list of themes. Use `--default` and `--prefersdark` flags.
`root`	`":root"`	CSS selector where daisyUI global variables are applied. Change to scope to a specific element.
`include`	(empty = all)	Comma-separated list of components/files to include. Everything else is excluded.
`exclude`	(empty = none)	Comma-separated list of components/files to exclude. Everything else is included.
`prefix`	(empty)	Prefix for all daisyUI class names (e.g., `d-` makes `btn` become `d-btn`).
`logs`	`true`	Show daisyUI console logs during build.

3.3 Theme configuration examples

Enable all 35 themes:

@plugin "daisyui" {
  themes: all;
}

Custom default + dark mode:

@plugin "daisyui" {
  themes: nord --default, abyss --prefersdark, cupcake, dracula;
}

This gives you nord as default, abyss for prefers-color-scheme: dark, and cupcake / dracula available via data-theme.

Disable all themes (for custom-only):

@plugin "daisyui" {
  themes: false;
}

3.4 Include / Exclude

Only include specific components:

@plugin "daisyui" {
  include: button, input, select;
}

Exclude specific parts:

@plugin "daisyui" {
  exclude: rootscrollgutter, checkbox;
}

3.5 Prefix

@plugin "daisyui" {
  prefix: d-;
}

All daisyUI classes become prefixed: btn → d-btn, card → d-card. Exception: theme-controller only gets the daisyUI prefix, not the Tailwind prefix.

If using both Tailwind and daisyUI prefixes (e.g., Tailwind tw: + daisyUI d-), then btn becomes tw:d-btn.

3.6 Scoped root

@plugin "daisyui" {
  root: "#my-app";
}

All daisyUI global CSS variables will be scoped to #my-app. Useful for web components, shadow DOM, or embedding in a third-party page.

4. Color System

Official docs: https://daisyui.com/docs/colors/

daisyUI replaces Tailwind's generic color palette (e.g., blue-500) with a semantic color system whose values change per theme.

4.1 Semantic color names

Color	Purpose
`primary`	Main brand color — used for primary actions and emphasis.
`primary-content`	Foreground color for use on `primary` backgrounds.
`secondary`	Optional secondary brand color.
`secondary-content`	Foreground for `secondary` backgrounds.
`accent`	Optional accent brand color.
`accent-content`	Foreground for `accent` backgrounds.
`neutral`	Neutral dark color for unsaturated UI parts.
`neutral-content`	Foreground for `neutral` backgrounds.
`base-100`	Base surface — blank page backgrounds.
`base-200`	Darker shade for elevation.
`base-300`	Even darker shade for deeper elevation.
`base-content`	Foreground for `base` backgrounds.
`info`	Informational/helpful messages.
`info-content`	Foreground for `info`.
`success`	Success/safe messages.
`success-content`	Foreground for `success`.
`warning`	Warning/caution messages.
`warning-content`	Foreground for `warning`.
`error`	Error/danger/destructive messages.
`error-content`	Foreground for `error`.

4.2 Why semantic colors matter

Using hardcoded Tailwind colors like bg-zinc-100 text-zinc-800 locks you into one look. You'd need dark:bg-zinc-900 dark:text-zinc-200 on every element to support dark mode — and you're still limited to two themes.

With daisyUI semantic names like bg-base-100 text-base-content, the colors adapt automatically to any active theme — dark mode, cupcake, cyberpunk, or your own custom theme — with zero extra classes.

<!-- ❌ Hardcoded: needs dark: for every element, limited to 2 themes -->
<div class="bg-zinc-100 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">...</div>

<!-- ✅ Semantic: auto-adapts to all themes, zero maintenance -->
<div class="bg-base-100 text-base-content">...</div>

4.3 Component auto-coloring

Many daisyUI components auto-set background, text, and border colors via modifier classes. You don't set these manually:

<!-- btn-primary auto-sets bg to primary, text to primary-content -->
<button class="btn btn-primary">Button</button>

<!-- checkbox-secondary auto-sets accent color -->
<input type="checkbox" class="checkbox checkbox-secondary" />

4.4 Using colors with Tailwind utilities

daisyUI colors work with any Tailwind CSS color utility:

<div class="bg-primary text-primary-content">Primary box</div>
<div class="border-secondary text-secondary">Secondary border</div>
<div class="ring-accent shadow-accent">Accent ring + shadow</div>

Full utility compatibility:

Utility	CDN availability
`bg-{COLOR}`	`properties.css`
`text-{COLOR}`	`properties.css`
`border-{COLOR}`	`properties.css`
`from-{COLOR}`	`properties-extended.css`
`via-{COLOR}`	`properties-extended.css`
`to-{COLOR}`	`properties-extended.css`
`ring-{COLOR}`	`properties-extended.css`
`fill-{COLOR}`	`properties-extended.css`
`stroke-{COLOR}`	`properties-extended.css`
`shadow-{COLOR}`	`properties-extended.css`
`outline-{COLOR}`	`properties-extended.css`
`divide-{COLOR}`	Tailwind plugin only
`accent-{COLOR}`	Tailwind plugin only
`caret-{COLOR}`	Tailwind plugin only
`decoration-{COLOR}`	Tailwind plugin only
`placeholder-{COLOR}`	Tailwind plugin only
`ring-offset-{COLOR}`	Tailwind plugin only

CDN standalone color files (for use without Tailwind):

Core: https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties.css
Extended: https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css

4.5 Opacity control

<div class="text-primary-content/60">60% opacity text</div>
<div class="bg-primary/30">30% opacity background</div>

4.6 Color rules

Use daisyUI color names so colors change automatically with themes.
Avoid raw Tailwind colors (e.g., text-gray-800) for themed content — they won't adapt to dark mode.
No dark: prefix needed — daisyUI colors auto-adapt.
*-content colors should have high contrast against their associated colors.
Use base-* for page chrome, primary for emphasis and actions.
If you use a raw Tailwind color (red-500), it stays the same across all themes.

5. Theming

Official docs: https://daisyui.com/docs/themes/

5.1 Built-in themes (35 total)

All 35 themes are included out of the box with themes: all or when using the npm plugin. By default only light and dark are enabled. On CDN, add themes.css for all 35.

#	Theme	Color Scheme	#	Theme	Color Scheme
1	`light`	light	19	`black`	dark
2	`dark`	dark	20	`luxury`	dark
3	`cupcake`	light	21	`dracula`	dark
4	`bumblebee`	light	22	`cmyk`	light
5	`emerald`	light	23	`autumn`	light
6	`corporate`	light	24	`business`	dark
7	`synthwave`	dark	25	`acid`	light
8	`retro`	light	26	`lemonade`	light
9	`cyberpunk`	light	27	`night`	dark
10	`valentine`	light	28	`coffee`	dark
11	`halloween`	dark	29	`winter`	light
12	`garden`	light	30	`dim`	dark
13	`forest`	dark	31	`nord`	light
14	`aqua`	light	32	`sunset`	dark
15	`lofi`	light	33	`caramellatte`	light
16	`pastel`	light	34	`abyss`	dark
17	`fantasy`	light	35	`silk`	light
18	`wireframe`	light

Enable all 35 themes (npm):

@plugin "daisyui" {
  themes: all;
}

Enable all 35 themes (CDN):

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

Enable specific themes only:

@plugin "daisyui" {
  themes: nord --default, abyss --prefersdark, cupcake, dracula, cyberpunk;
}

Apply a theme globally:

<html data-theme="cyberpunk">

Apply a theme to a section:

<html data-theme="light">
  <div data-theme="dracula">This section uses Dracula theme</div>
</html>

Themes can be nested without limit.

5.2 Theme switching at runtime

Use the theme-change library or set data-theme with JavaScript:

document.documentElement.setAttribute('data-theme', 'dracula');

Or use daisyUI's Theme Controller component (covered in §8.6).

5.3 Creating custom themes

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

@plugin "daisyui/theme" {
  name: "mytheme";
  default: true;
  prefersdark: false;
  color-scheme: light;

  /* Colors (OKLCH, hex, or any CSS color format) */
  --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);

  /* Border radius */
  --radius-selector: 1rem;     /* checkbox, toggle, badge */
  --radius-field: 0.25rem;     /* button, input, select, tab */
  --radius-box: 0.5rem;        /* card, modal, alert */

  /* Base sizes */
  --size-selector: 0.25rem;    /* checkbox, toggle, badge scale */
  --size-field: 0.25rem;       /* button, input, select, tab scale */

  /* Border */
  --border: 1px;

  /* Effects (binary: 0 or 1) */
  --depth: 1;                  /* shadow + 3D depth */
  --noise: 0;                  /* grain/noise texture */
}

All CSS variables above are required when creating a custom theme from scratch. Colors can be in any CSS color format (OKLCH recommended for perceptual uniformity).

Use the visual Theme Generator for interactive theme creation.

5.4 Customizing a built-in theme

Override only the variables you want to change — the rest inherit:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

5.5 Theme-specific custom styles

[data-theme="light"] {
  .my-btn {
    background-color: #1EA1F1;
  }
}

5.6 Using Tailwind's `dark:` prefix with daisyUI

@import "tailwindcss";
@plugin "daisyui" {
  themes: winter --default, night --prefersdark;
}

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));

Now dark:p-20 applies when the night theme is active.

5.7 CDN custom themes

When using CDN without a build step:

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-base-100: oklch(98% 0.02 240);
  /* ... all other variables ... */
}

6. Customization

Official docs: https://daisyui.com/docs/customize/

daisyUI components come with many built-in variants. When you need to go further:

6.1 Layer 1 — daisyUI classes

Use built-in style/color/size modifiers:

<button class="btn btn-primary btn-lg btn-outline">Styled</button>

6.2 Layer 2 — Tailwind utility classes

Add any Tailwind utility alongside daisyUI classes:

<button class="btn rounded-full px-16 shadow-xl">Custom</button>

6.3 Layer 3 — Important override (`!`)

If a Tailwind utility doesn't override a daisyUI style due to specificity:

<button class="btn bg-red-500!">Force red</button>

Use sparingly — this is a last resort.

6.4 Layer 4 — CSS `@utility` directive

Globally customize a component class via CSS:

@utility btn {
  @apply rounded-full;
}

7. Utility Classes & CSS Variables

Official docs: https://daisyui.com/docs/utilities/

7.1 Border radius utilities

daisyUI adds theme-aware border radius tokens:

Class	CSS Variable	Use for
`rounded-box`	`var(--radius-box)`	Cards, modals, alerts
`rounded-field`	`var(--radius-field)`	Buttons, inputs, selects, tabs
`rounded-selector`	`var(--radius-selector)`	Checkboxes, toggles, badges

These values change when you switch themes, keeping your UI consistent.

7.2 Glass effect

<div class="glass">Frosted glass effect</div>

7.3 Theme CSS variables reference

Variable	Description
`--color-primary`	Primary brand color
`--color-primary-content`	Foreground for primary
`--color-secondary`	Secondary brand color
`--color-secondary-content`	Foreground for secondary
`--color-accent`	Accent brand color
`--color-accent-content`	Foreground for accent
`--color-neutral`	Neutral dark color
`--color-neutral-content`	Foreground for neutral
`--color-base-100`	Base surface (lightest)
`--color-base-200`	Base (darker shade)
`--color-base-300`	Base (darkest shade)
`--color-base-content`	Foreground for base
`--color-info`	Info color
`--color-info-content`	Foreground for info
`--color-success`	Success color
`--color-success-content`	Foreground for success
`--color-warning`	Warning color
`--color-warning-content`	Foreground for warning
`--color-error`	Error color
`--color-error-content`	Foreground for error
`--radius-selector`	Border radius for selectors
`--radius-field`	Border radius for fields
`--radius-box`	Border radius for boxes
`--size-selector`	Scale for selectors
`--size-field`	Scale for fields
`--border`	Global border width
`--depth`	Binary (0/1) — shadow/3D depth
`--noise`	Binary (0/1) — grain texture

7.4 Component-specific CSS variables

For advanced customization, each component exposes internal CSS variables. These are not subject to semver — pin your daisyUI version if you rely on them.

If you use a prefix for daisyUI (e.g., daisy-), these CSS variables will also be prefixed (e.g., --daisy-alert-color).

Component	Variable	Description
Alert	`--alert-color`	Color of the alert
Badge	`--badge-color`	Color of the badge
Badge	`--size`	Size of the badge
Button	`--btn-color`	Background color
Button	`--btn-fg`	Foreground color
Button	`--btn-shadow`	Shadow
Button	`--btn-noise`	Noise background (if enabled)
Button	`--btn-p`	Padding
Button	`--size`	Size
Card	`--card-p`	Body padding
Card	`--card-fs`	Body font size
Card	`--cardtitle-fs`	Title font size
Checkbox	`--size`	Size
Countdown	`--value`	Value (0–999)
Countdown	`--digits`	Minimum number of digits
Divider	`--divider-m`	Margin
Dropdown	`--anchor-v`	Vertical anchor position
Dropdown	`--anchor-h`	Horizontal anchor position
File Input	`--input-color`	Color
File Input	`--size`	Size
Glass	`--glass-blur`	Blur amount
Glass	`--glass-opacity`	Opacity
Glass	`--glass-reflect-degree`	Reflection degree
Glass	`--glass-reflect-opacity`	Reflection opacity
Glass	`--glass-border-opacity`	Border opacity
Glass	`--glass-text-shadow-opacity`	Text shadow opacity
Hover 3D	`--ease`	Easing animation
Hover 3D	`--shadow`	Underlying shadow effect
Hover 3D	`--shine`	Overlay shine effect
Hover 3D	`--transform`	Transform angle
Hover Gallery	`--items`	Number of items
Indicator	`--indicator-t`	Top position
Indicator	`--indicator-b`	Bottom position
Indicator	`--indicator-s`	Start position
Indicator	`--indicator-e`	End position
Indicator	`--indicator-y`	Vertical position
Indicator	`--indicator-x`	Horizontal position
Input	`--input-color`	Color
Input	`--size`	Size
Input	`--font-size`	Font size
Join	`--join-ss`	Start-start border radius
Join	`--join-se`	Start-end border radius
Join	`--join-es`	End-start border radius
Join	`--join-ee`	End-end border radius
Kbd	`--size`	Size
List	`--list-grid-cols`	Grid columns
Menu	`--menu-active-fg`	Active item foreground
Menu	`--menu-active-bg`	Active item background
Modal	`--modal-tl`	Top-left border radius
Modal	`--modal-tr`	Top-right border radius
Modal	`--modal-bl`	Bottom-left border radius
Modal	`--modal-br`	Bottom-right border radius
Radial Progress	`--value`	Progress value (0–100)
Radial Progress	`--size`	Component size (default 5rem)
Radial Progress	`--thickness`	Indicator thickness
Radio	`--size`	Size
Range	`--range-bg`	Background color
Range	`--range-thumb`	Thumb color
Range	`--range-thumb-size`	Thumb size
Range	`--range-progress`	Progress fill color
Range	`--range-fill`	Binary — fill progress or not
Range	`--range-p`	Thumb padding
Range	`--size`	Overall size
Select	`--input-color`	Color
Select	`--size`	Size
Tab	`--tabs-height`	Tab bar height
Tab	`--tabs-direction`	Tab direction
Tab	`--tab-p`	Tab padding
Tab	`--tab-bg`	Tab background
Tab	`--tab-border-color`	Tab border color
Tab	`--tab-radius-ss/se/es/ee`	Per-corner border radius
Tab	`--tab-order`	Tab order
Tab	`--tabcontent-margin`	Content margin
Tab	`--tabcontent-radius-ss/se/es/ee`	Content per-corner radius
Tab	`--tabcontent-order`	Content order
Text Rotate	`--items`	Number of items
Text Rotate	`--duration`	Loop duration (ms)
Textarea	`--input-color`	Color
Textarea	`--size`	Size
Textarea	`--font-size`	Font size
Timeline	`--timeline-row-start`	Row start position
Timeline	`--timeline-row-end`	Row end position
Timeline	`--timeline-col-start`	Column start position
Timeline	`--timeline-col-end`	Column end position
Toast	`--toast-x`	Horizontal position
Toast	`--toast-y`	Vertical position
Toggle	`--toggle-p`	Padding
Toggle	`--size`	Size
Tooltip	`--tt-bg`	Background color
Tooltip	`--tt-off`	Offset distance
Tooltip	`--tt-tailw`	Tail position

7.5 Customizing component CSS variables

Inline with Tailwind arbitrary properties:

<div class="alert [--alert-color:blue]">
  <span>Custom colored alert</span>
</div>

From CSS:

.alert {
  --alert-color: blue;
}

7A. Base Styles

Official docs: https://daisyui.com/docs/base/

daisyUI adds a small set of base styles (under 1 KB total). These can be individually excluded via config.

Name	Description
`properties`	Necessary CSS at-rules (e.g., variable type for `--radialprogress`)
`rootcolor`	Sets `:root` and `[data-theme]` background to `base-100`, text to `base-content`
`scrollbar`	Sets `scrollbar-color` on `:root`
`rootscrolllock`	Sets `:root` to `overflow: hidden` when a modal or drawer is open
`rootscrollgutter`	Adds `scrollbar-gutter` to `:root` when modal/drawer is open (prevents layout shift)
`svg`	Inline SVG images for noise filter, chat bubble tail mask, and tooltip tail mask

Excluding base styles:

@plugin "daisyui" {
  exclude: rootscrollgutter, scrollbar;
}

7B. Layout & Typography

Official docs: https://daisyui.com/docs/layout-and-typography/

Layout

daisyUI does not provide layout utilities — that's Tailwind CSS's job. Use Tailwind's native utilities for all layout concerns: Flexbox, Grid, Sizing, Spacing, Box alignment.

Typography — `prose` plugin

daisyUI supports the Tailwind CSS Typography plugin. All prose styles are fully compatible with daisyUI themes — heading colors, link colors, code block backgrounds, blockquote styling, and table striping all adapt automatically.

npm i -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui";

<article class="prose">
  <h1>Heading</h1>
  <p>Paragraph with <a href="#">themed link</a>.</p>
  <blockquote>Themed blockquote.</blockquote>
  <pre><code>console.log('themed code block');</code></pre>
</article>

The prose class styles all semantic HTML inside it (headings, paragraphs, lists, tables, code, images, blockquotes). Colors adapt to the active daisyUI theme automatically.

8. Components — Actions

Official docs: https://daisyui.com/components/

8.1 Button

📖 Docs: https://daisyui.com/components/button/

Buttons allow the user to take actions or make choices.

Classes:

Type	Classes
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`
Size	`btn-xs` `btn-sm` `btn-md` `btn-lg` `btn-xl`
Shape	`btn-wide` `btn-block` `btn-square` `btn-circle`
State	`btn-active` `btn-disabled`

Syntax:

<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-outline btn-lg">Large outlined</button>
<button class="btn btn-circle btn-ghost">
  <svg><!-- icon --></svg>
</button>
<a class="btn btn-link">Link button</a>

Rules:

btn works on <button>, <a>, <input>, and any HTML element.
Icons can be placed before or after button text.
For disabled state via class (not attribute), also set tabindex="-1" role="button" aria-disabled="true".
btn-block makes the button full-width. btn-wide adds extra horizontal padding.

8.2 Dropdown

📖 Docs: https://daisyui.com/components/dropdown/

Dropdown opens a menu or any element when clicked.

Classes:

Type	Classes
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`

Syntax — details/summary (recommended):

<details class="dropdown">
  <summary class="btn">Click me</summary>
  <ul class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm z-1">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

Syntax — Popover API:

<button popovertarget="my-dropdown" style="anchor-name:--my-dropdown">Open</button>
<ul class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm"
    popover id="my-dropdown" style="position-anchor:--my-dropdown">
  <li><a>Item 1</a></li>
</ul>

Syntax — CSS focus:

<div class="dropdown">
  <div tabindex="0" role="button" class="btn">Click</div>
  <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm z-1">
    <li><a>Item 1</a></li>
  </ul>
</div>

Rules:

dropdown-content can be any HTML element, not just <ul>.
Replace id and anchor-name values with unique identifiers.
Use dropdown-hover for hover-triggered dropdowns.
Always add z-1 (or higher) to dropdown-content so it renders above surrounding content.

8.3 FAB / Speed Dial

📖 Docs: https://daisyui.com/components/fab/

Floating Action Button that stays in the bottom corner of the screen.

Classes:

Type	Classes
Component	`fab`
Part	`fab-close` `fab-main-action`
Modifier	`fab-flower`

Syntax — single FAB:

<div class="fab">
  <button class="btn btn-lg btn-circle btn-primary">+</button>
</div>

Syntax — speed dial (vertical):

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">+</div>
  <button class="btn btn-lg btn-circle">📧</button>
  <button class="btn btn-lg btn-circle">📎</button>
  <button class="btn btn-lg btn-circle">📷</button>
</div>

Syntax — with labels:

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">+</div>
  <div>Email <button class="btn btn-lg btn-circle">📧</button></div>
  <div>Attach <button class="btn btn-lg btn-circle">📎</button></div>
</div>

Syntax — flower arrangement (quarter circle):

<div class="fab fab-flower">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">+</div>
  <button class="fab-main-action btn btn-circle btn-lg">⭐</button>
  <button class="btn btn-lg btn-circle">📧</button>
  <button class="btn btn-lg btn-circle">📎</button>
  <button class="btn btn-lg btn-circle">📷</button>
</div>

Syntax — with close button:

<div class="fab">
  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">+</div>
  <div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">✕</span></div>
  <div>Email <button class="btn btn-lg btn-circle">📧</button></div>
</div>

Rules:

FAB is positioned at the bottom-right by default.
fab-flower arranges speed dial buttons in a quarter circle instead of vertical.
fab-main-action replaces the original button icon when the FAB is open.
fab-close shows a close button when open.
Use tooltip with fab-flower since there's no space for text labels.

8.4 Modal

📖 Docs: https://daisyui.com/components/modal/

Modal shows a dialog box when triggered.

Classes:

Type	Classes
Component	`modal`
Part	`modal-box` `modal-action` `modal-backdrop` `modal-toggle`
Placement	`modal-top` `modal-middle` `modal-bottom` `modal-start` `modal-end`
Modifier	`modal-open`

Syntax — HTML <dialog> (recommended):

<button onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Modal content here.</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

Syntax — checkbox (legacy):

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

Rules:

Prefer the <dialog> approach — it's accessible and supports native close on Escape.
modal-backdrop closes the modal when clicked.
Use <form method="dialog"> inside for close buttons.
Placement classes position the modal (default is center).
Use unique IDs for each modal.

8.5 Swap

📖 Docs: https://daisyui.com/components/swap/

Toggle visibility between two elements.

Classes:

Type	Classes
Component	`swap`
Part	`swap-on` `swap-off` `swap-indeterminate`
Style	`swap-rotate` `swap-flip`
Modifier	`swap-active`

Syntax — checkbox:

<label class="swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">🌙</div>
  <div class="swap-off">☀️</div>
</label>

Syntax — class-based (JS controlled):

<div class="swap swap-flip swap-active">
  <div class="swap-on">ON</div>
  <div class="swap-off">OFF</div>
</div>

Rules:

swap-rotate adds a rotation transition. swap-flip adds a flip.
Add/remove swap-active via JS for manual control.
swap-indeterminate shows when the checkbox is in indeterminate state.

8.6 Theme Controller

📖 Docs: https://daisyui.com/components/theme-controller/

Changes the active theme based on a checked input.

Classes:

Type	Classes
Component	`theme-controller`

Syntax — checkbox (toggle between two themes):

<input type="checkbox" value="synthwave" class="toggle theme-controller" />

Syntax — radio buttons (multiple themes):

<input type="radio" name="theme" value="light" class="btn theme-controller" aria-label="Light" />
<input type="radio" name="theme" value="dark" class="btn theme-controller" aria-label="Dark" />
<input type="radio" name="theme" value="cupcake" class="btn theme-controller" aria-label="Cupcake" />

Rules:

The value attribute must be a valid daisyUI theme name.
Can be combined with any input-style component (toggle, radio, checkbox, dropdown, select).
When checked, the page automatically adopts that theme.

9. Components — Data Display

Official docs: https://daisyui.com/components/

9.1 Accordion

📖 Docs: https://daisyui.com/components/accordion/

Shows/hides content — only one item open at a time.

Classes:

Type	Classes
Component	`collapse`
Part	`collapse-title` `collapse-content`
Modifier	`collapse-arrow` `collapse-plus` `collapse-open` `collapse-close`

Syntax:

<div class="collapse collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" checked="checked" />
  <div class="collapse-title font-semibold">Item 1</div>
  <div class="collapse-content">Content for item 1.</div>
</div>
<div class="collapse collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" />
  <div class="collapse-title font-semibold">Item 2</div>
  <div class="collapse-content">Content for item 2.</div>
</div>

Rules:

All radio inputs in a group share the same name — only one can be open.
Use different name values for separate accordion groups on the same page.
collapse-arrow shows a chevron; collapse-plus shows a plus/minus icon.
Set checked="checked" on a radio to open that item by default.

9.2 Avatar

📖 Docs: https://daisyui.com/components/avatar/

Thumbnail representation of a user or entity.

Classes:

Type	Classes
Component	`avatar` `avatar-group`
Modifier	`avatar-online` `avatar-offline` `avatar-placeholder`

Syntax:

<div class="avatar">
  <div class="w-24 rounded-full">
    <img src="photo.jpg" alt="User" />
  </div>
</div>

Avatar with status:

<div class="avatar avatar-online">
  <div class="w-16 rounded-full">
    <img src="photo.jpg" />
  </div>
</div>

Avatar group:

<div class="avatar-group -space-x-6">
  <div class="avatar">
    <div class="w-12"><img src="1.jpg" /></div>
  </div>
  <div class="avatar">
    <div class="w-12"><img src="2.jpg" /></div>
  </div>
  <div class="avatar avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-12">
      <span>+5</span>
    </div>
  </div>
</div>

Rules:

Set size with w-* (Tailwind width classes).
Use rounded-full for circles, or mask classes (mask-squircle, mask-hexagon, etc.) for shapes.
avatar-placeholder is for showing initials or a count when no image is available.

9.3 Badge

📖 Docs: https://daisyui.com/components/badge/

Informs users of status or count.

Classes:

Type	Classes
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`

Syntax:

<span class="badge">Default</span>
<span class="badge badge-primary badge-lg">Primary Large</span>
<span class="badge badge-outline badge-error badge-sm">Error</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge"></span>  <!-- Empty dot badge -->

9.4 Card

📖 Docs: https://daisyui.com/components/card/

Groups and displays content readably.

Classes:

Type	Classes
Component	`card`
Part	`card-title` `card-body` `card-actions`
Style	`card-border` `card-dash`
Size	`card-xs` `card-sm` `card-md` `card-lg` `card-xl`
Modifier	`card-side` `image-full`

Syntax:

<div class="card bg-base-100 shadow-sm w-96">
  <figure>
    <img src="photo.jpg" alt="Alt text" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card description goes here.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

Horizontal card:

<div class="card sm:card-side bg-base-100 shadow-sm">
  <figure><img src="photo.jpg" /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Description</p>
  </div>
</div>

You can also use sm:card-horizontal as an alternative responsive modifier.

Full image overlay:

<div class="card image-full shadow-sm">
  <figure><img src="photo.jpg" /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content over image</p>
  </div>
</div>

Rules:

<figure> and card-body are optional.
Use sm:card-side for responsive horizontal layout.
image-full overlays card-body on top of the image.
If the image is placed after card-body, it appears at the bottom.

9.5 Carousel

📖 Docs: https://daisyui.com/components/carousel/

Scrollable content area.

Classes:

Type	Classes
Component	`carousel`
Part	`carousel-item`
Modifier	`carousel-start` `carousel-center` `carousel-end`
Direction	`carousel-horizontal` `carousel-vertical`

Syntax:

<div class="carousel carousel-center rounded-box">
  <div class="carousel-item">
    <img src="1.jpg" alt="Slide 1" />
  </div>
  <div class="carousel-item">
    <img src="2.jpg" alt="Slide 2" />
  </div>
</div>

Full-width slides:

<div class="carousel w-full">
  <div class="carousel-item w-full">
    <img src="1.jpg" class="w-full" />
  </div>
</div>

9.6 Chat Bubble

📖 Docs: https://daisyui.com/components/chat/

Shows a line of conversation with author, time, and message.

Classes:

Type	Classes
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`

Syntax:

<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img src="avatar.jpg" />
    </div>
  </div>
  <div class="chat-header">
    Obi-Wan
    <time class="text-xs opacity-50">12:45</time>
  </div>
  <div class="chat-bubble">Hello there!</div>
  <div class="chat-footer opacity-50">Delivered</div>
</div>

<div class="chat chat-end">
  <div class="chat-bubble chat-bubble-primary">General Kenobi!</div>
</div>

Rules:

chat-start or chat-end is required to set alignment.
All parts (chat-image, chat-header, chat-footer) are optional.

9.7 Collapse

📖 Docs: https://daisyui.com/components/collapse/

Show/hide content (single item, not part of a radio group).

Classes:

Type	Classes
Component	`collapse`
Part	`collapse-title` `collapse-content`
Modifier	`collapse-arrow` `collapse-plus` `collapse-open` `collapse-close`

Syntax — focusable:

<div tabindex="0" class="collapse collapse-arrow bg-base-100 border border-base-300">
  <div class="collapse-title font-semibold">Click to expand</div>
  <div class="collapse-content">Hidden content revealed.</div>
</div>

Syntax — checkbox:

<div class="collapse bg-base-100 border border-base-300">
  <input type="checkbox" />
  <div class="collapse-title font-semibold">Toggle me</div>
  <div class="collapse-content">Content here.</div>
</div>

Syntax — <details> / <summary>:

<details class="collapse bg-base-100 border border-base-300">
  <summary class="collapse-title font-semibold">Click</summary>
  <div class="collapse-content">Content</div>
</details>

Rules:

Unlike Accordion, individual collapses are independent — multiple can be open simultaneously.
collapse-open forces it open; collapse-close forces it closed.

9.8 Countdown

📖 Docs: https://daisyui.com/components/countdown/

Animated number transition between 0–999.

Classes:

Type	Classes
Component	`countdown`

Syntax:

<span class="countdown font-mono text-6xl">
  <span style="--value:42;" aria-live="polite" aria-label="42">42</span>
</span>

Multi-digit (clock-style):

<span class="countdown font-mono text-4xl">
  <span style="--value:10;">10</span>h
  <span style="--value:24;">24</span>m
  <span style="--value:59;">59</span>s
</span>

Rules:

--value CSS variable and inner text must both be updated (via JS).
Value range: 0–999.
Add aria-live="polite" and aria-label for accessibility.

9.9 Diff

📖 Docs: https://daisyui.com/components/diff/

Side-by-side comparison of two items.

Classes:

Type	Classes
Component	`diff`
Part	`diff-item-1` `diff-item-2` `diff-resizer`

Syntax:

<figure class="diff aspect-16/9">
  <div class="diff-item-1">
    <img src="before.jpg" />
  </div>
  <div class="diff-item-2">
    <img src="after.jpg" />
  </div>
  <div class="diff-resizer"></div>
</figure>

Rules:

Add aspect-16/9 or other aspect ratio to maintain proportions.
Can contain any content, not just images.

9.10 Hover 3D Card

📖 Docs: https://daisyui.com/components/hover-3d/

Adds a 3D tilt effect on mouse hover.

Classes:

Type	Classes
Component	`hover-3d`

Syntax:

<div class="hover-3d my-12 mx-2">
  <figure class="max-w-100 rounded-2xl">
    <img src="card.jpg" alt="3D card" />
  </figure>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
</div>

Rules:

Must have exactly 9 direct children: first is the visible content, other 8 are empty <div>s for hover zones.
Content must be non-interactive (no buttons, links, inputs inside).
To make the whole thing clickable, use <a class="hover-3d"> instead of <div>.

9.11 Hover Gallery

📖 Docs: https://daisyui.com/components/hover-gallery/

Container that reveals multiple images on horizontal hover.

Classes:

Type	Classes
Component	`hover-gallery`

Syntax:

<figure class="hover-gallery max-w-60">
  <img src="product-1.jpg" />
  <img src="product-2.jpg" />
  <img src="product-3.jpg" />
  <img src="product-4.jpg" />
</figure>

Rules:

Supports up to 10 images.
Needs a max-width set or it fills the container.
Images should be the same dimensions.

9.12 Kbd

📖 Docs: https://daisyui.com/components/kbd/

Displays keyboard shortcuts.

Classes:

Type	Classes
Component	`kbd`
Size	`kbd-xs` `kbd-sm` `kbd-md` `kbd-lg` `kbd-xl`

Syntax:

<kbd class="kbd">⌘</kbd> + <kbd class="kbd">K</kbd>

9.13 List

📖 Docs: https://daisyui.com/components/list/

Vertical layout for displaying information in rows.

Classes:

Type	Classes
Component	`list` `list-row`
Modifier	`list-col-wrap` `list-col-grow`

Syntax:

<ul class="list bg-base-100 rounded-box shadow-md">
  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Section Title</li>
  <li class="list-row">
    <div><img class="size-10 rounded-box" src="thumb.jpg" /></div>
    <div>
      <div>Item Title</div>
      <div class="text-xs uppercase font-semibold opacity-60">Subtitle</div>
    </div>
    <button class="btn btn-square btn-ghost">▶</button>
  </li>
</ul>

Rules:

By default, the second child of list-row fills remaining space.
Use list-col-grow on another child to change which one grows.
Use list-col-wrap to force an item to wrap to the next line.

9.14 Stat

📖 Docs: https://daisyui.com/components/stat/

Displays numbers and data in blocks.

Classes:

Type	Classes
Component	`stats`
Part	`stat` `stat-title` `stat-value` `stat-desc` `stat-figure` `stat-actions`
Direction	`stats-horizontal` `stats-vertical`

Syntax:

<div class="stats shadow">
  <div class="stat">
    <div class="stat-figure text-primary">
      <svg><!-- icon --></svg>
    </div>
    <div class="stat-title">Total Revenue</div>
    <div class="stat-value text-primary">$25.6K</div>
    <div class="stat-desc">21% more than last month</div>
  </div>
  <div class="stat">
    <div class="stat-title">Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc text-secondary">↗ 400 (22%)</div>
  </div>
</div>

Rules:

Horizontal by default; use stats-vertical for vertical layout.
Wrap multiple stat elements inside a single stats container.

9.15 Status

📖 Docs: https://daisyui.com/components/status/

Tiny icon showing current state (online, offline, error).

Classes:

Type	Classes
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`

Syntax:

<span class="status status-success"></span>
<span class="status status-error status-lg"></span>

9.16 Table

📖 Docs: https://daisyui.com/components/table/

Displays tabular data.

Classes:

Type	Classes
Component	`table`
Modifier	`table-zebra` `table-pin-rows` `table-pin-cols`
Size	`table-xs` `table-sm` `table-md` `table-lg` `table-xl`

Syntax:

<div class="overflow-x-auto">
  <table class="table table-zebra">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Alice</td>
        <td>Engineer</td>
      </tr>
    </tbody>
  </table>
</div>

Rules:

Wrap with overflow-x-auto for horizontal scrolling on small screens.
table-pin-rows keeps the header visible while scrolling.
table-pin-cols keeps the first column visible while scrolling horizontally.

9.17 Text Rotate

📖 Docs: https://daisyui.com/components/text-rotate/

Animated text that cycles through up to 6 lines.

Classes:

Type	Classes
Component	`text-rotate`

Syntax:

<span class="text-rotate text-4xl font-bold">
  <span class="justify-items-center">
    <span>DESIGN</span>
    <span>DEVELOP</span>
    <span>DEPLOY</span>
  </span>
</span>

Inline usage:

<span>We build for
  <span class="text-rotate font-bold">
    <span>
      <span class="bg-primary text-primary-content px-2">Designers</span>
      <span class="bg-secondary text-secondary-content px-2">Developers</span>
      <span class="bg-accent text-accent-content px-2">Everyone</span>
    </span>
  </span>
</span>

Rules:

Must have one wrapper child containing 2–6 text spans.
Default loop duration: 10 seconds. Customize with duration-{ms} (e.g., duration-12000).
Animation pauses on hover.

9.18 Timeline

📖 Docs: https://daisyui.com/components/timeline/

Chronological list of events.

Classes:

Type	Classes
Component	`timeline`
Part	`timeline-start` `timeline-middle` `timeline-end`
Modifier	`timeline-snap-icon` `timeline-box` `timeline-compact`
Direction	`timeline-vertical` `timeline-horizontal`

Syntax:

<ul class="timeline timeline-vertical">
  <li>
    <div class="timeline-start">2020</div>
    <div class="timeline-middle">
      <svg class="size-5"><!-- dot icon --></svg>
    </div>
    <div class="timeline-end timeline-box">Event description.</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start">2023</div>
    <div class="timeline-middle">
      <svg class="size-5"><!-- dot icon --></svg>
    </div>
    <div class="timeline-end timeline-box">Another event.</div>
  </li>
</ul>

Rules:

timeline-compact forces all items to one side.
timeline-snap-icon snaps icons to the start instead of the middle.
timeline-box adds a box around content.
Use <hr /> elements between <li> items to draw connecting lines.

10. Components — Navigation

Official docs: https://daisyui.com/components/

10.1 Breadcrumbs

📖 Docs: https://daisyui.com/components/breadcrumbs/

Helps users navigate hierarchically.

Classes:

Type	Classes
Component	`breadcrumbs`

Syntax:

<div class="breadcrumbs text-sm">
  <ul>
    <li><a>Home</a></li>
    <li><a>Documents</a></li>
    <li>Current Page</li>
  </ul>
</div>

Rules:

The last item (without <a>) represents the current page.
Icons can be placed inside the links.
If the list exceeds container width, it scrolls horizontally.

10.2 Dock

📖 Docs: https://daisyui.com/components/dock/

Bottom navigation bar that sticks to the screen.

Classes:

Type	Classes
Component	`dock`
Part	`dock-label`
Modifier	`dock-active`
Size	`dock-xs` `dock-sm` `dock-md` `dock-lg` `dock-xl`

Syntax:

<div class="dock dock-md">
  <button>
    <svg><!-- icon --></svg>
    <span class="dock-label">Home</span>
  </button>
  <button class="dock-active">
    <svg><!-- icon --></svg>
    <span class="dock-label">Search</span>
  </button>
  <button>
    <svg><!-- icon --></svg>
    <span class="dock-label">Profile</span>
  </button>
</div>

Rules:

Add <meta name="viewport" content="viewport-fit=cover"> for proper iOS rendering.
Use dock-active to highlight the current navigation item.

10.3 Link

📖 Docs: https://daisyui.com/components/link/

Adds underline styling to anchor elements.

Classes:

Type	Classes
Component	`link`
Style	`link-hover`
Color	`link-neutral` `link-primary` `link-secondary` `link-accent` `link-success` `link-info` `link-warning` `link-error`

Syntax:

<a class="link link-primary">Primary link</a>
<a class="link link-hover">Underline on hover only</a>

10.4 Menu

📖 Docs: https://daisyui.com/components/menu/

Displays a list of links vertically or horizontally.

Classes:

Type	Classes
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`

Syntax:

<ul class="menu bg-base-200 rounded-box w-56">
  <li class="menu-title">Category</li>
  <li><a>Item 1</a></li>
  <li><a class="menu-active">Item 2 (active)</a></li>
  <li><a class="menu-disabled">Item 3 (disabled)</a></li>
  <li>
    <details>
      <summary>Submenu</summary>
      <ul>
        <li><a>Sub-item 1</a></li>
        <li><a>Sub-item 2</a></li>
      </ul>
    </details>
  </li>
</ul>

Horizontal:

<ul class="menu menu-horizontal bg-base-200 rounded-box">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

Rules:

Use lg:menu-horizontal for responsive layouts.
Use <details> for collapsible submenus.
menu-dropdown and menu-dropdown-toggle offer JS-controlled dropdown state.

10.5 Navbar

📖 Docs: https://daisyui.com/components/navbar/

Top navigation bar.

Classes:

Type	Classes
Component	`navbar`
Part	`navbar-start` `navbar-center` `navbar-end`

Syntax:

<div class="navbar bg-base-200">
  <div class="navbar-start">
    <a class="btn btn-ghost text-xl">Logo</a>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li><a>Home</a></li>
      <li><a>About</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    <a class="btn btn-primary">Get Started</a>
  </div>
</div>

Rules:

navbar-start, navbar-center, navbar-end divide the bar into three sections.
Can contain any content — dropdowns, search bars, avatars, etc.

10.6 Pagination

📖 Docs: https://daisyui.com/components/pagination/

A group of buttons for page navigation.

Classes:

Uses join and join-item (not a separate component):

Syntax:

<div class="join">
  <button class="join-item btn">«</button>
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
  <button class="join-item btn">»</button>
</div>

10.7 Steps

📖 Docs: https://daisyui.com/components/steps/

Shows progress through a process.

Classes:

Type	Classes
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`

Syntax:

<ul class="steps">
  <li class="step step-primary">Register</li>
  <li class="step step-primary">Choose plan</li>
  <li class="step">Purchase</li>
  <li class="step">Receive Product</li>
</ul>

With custom content:

<ul class="steps">
  <li class="step step-primary" data-content="✓">Step 1</li>
  <li class="step step-primary" data-content="●">Step 2</li>
  <li class="step" data-content="○">Step 3</li>
</ul>

Rules:

Add the color class to each completed step.
Use data-content for custom step indicators.
Horizontal by default; use steps-vertical for vertical.

10.8 Tab

📖 Docs: https://daisyui.com/components/tab/

Tabbed interface for switching content.

Classes:

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

Syntax — buttons (no content switching):

<div role="tablist" class="tabs tabs-border">
  <button role="tab" class="tab">Tab 1</button>
  <button role="tab" class="tab tab-active">Tab 2</button>
  <button role="tab" class="tab">Tab 3</button>
</div>

Syntax — radio inputs (with content):

<div role="tablist" class="tabs tabs-lift">
  <input type="radio" name="my-tabs" class="tab" aria-label="Tab 1" />
  <div class="tab-content bg-base-100 border-base-300 p-6">Tab 1 content</div>

  <input type="radio" name="my-tabs" class="tab" aria-label="Tab 2" checked="checked" />
  <div class="tab-content bg-base-100 border-base-300 p-6">Tab 2 content</div>

  <input type="radio" name="my-tabs" class="tab" aria-label="Tab 3" />
  <div class="tab-content bg-base-100 border-base-300 p-6">Tab 3 content</div>
</div>

Rules:

Radio inputs are required for automatic content switching.
tabs-box gives a boxed style; tabs-border adds a bottom border; tabs-lift creates the lifted tab look.
Use tabs-bottom to put tabs below content.

11. Components — Feedback

Official docs: https://daisyui.com/components/

11.1 Alert

📖 Docs: https://daisyui.com/components/alert/

Informs users about important events.

Classes:

Type	Classes
Component	`alert`
Style	`alert-outline` `alert-dash` `alert-soft`
Color	`alert-info` `alert-success` `alert-warning` `alert-error`
Direction	`alert-vertical` `alert-horizontal`

Syntax:

<div role="alert" class="alert alert-info">
  <svg><!-- info icon --></svg>
  <span>New update available.</span>
</div>

Responsive:

<div role="alert" class="alert alert-warning alert-vertical sm:alert-horizontal">
  <svg><!-- icon --></svg>
  <span>Storage almost full.</span>
  <button class="btn btn-sm">Upgrade</button>
</div>

Rules:

Always use role="alert" for accessibility.
Use sm:alert-horizontal for responsive layouts.

11.2 Loading

📖 Docs: https://daisyui.com/components/loading/

Animated loading indicators.

Classes:

Type	Classes
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`

Syntax:

<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-dots loading-sm text-primary"></span>
<span class="loading loading-infinity loading-xl text-accent"></span>

Rules:

Color is inherited from text-* or color on the element.
Choose one style per loading indicator.

11.3 Progress

📖 Docs: https://daisyui.com/components/progress/

Linear progress bar.

Classes:

Type	Classes
Component	`progress`
Color	`progress-neutral` `progress-primary` `progress-secondary` `progress-accent` `progress-info` `progress-success` `progress-warning` `progress-error`

Syntax:

<progress class="progress progress-primary w-56" value="70" max="100"></progress>

Indeterminate:

<progress class="progress w-56"></progress>

11.4 Radial Progress

📖 Docs: https://daisyui.com/components/radial-progress/

Circular progress indicator.

Classes:

Type	Classes
Component	`radial-progress`

Syntax:

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

Rules:

--value: 0–100. Text inside is for display.
--size: Custom diameter (default 5rem).
--thickness: Custom stroke width.
Always add role="progressbar" and aria-valuenow.

11.5 Skeleton

📖 Docs: https://daisyui.com/components/skeleton/

Loading placeholder.

Classes:

Type	Classes
Component	`skeleton`
Modifier	`skeleton-text`

Syntax:

<div class="flex flex-col gap-4 w-52">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton skeleton-text h-4 w-28"></div>
  <div class="skeleton skeleton-text h-4 w-full"></div>
  <div class="skeleton skeleton-text h-4 w-full"></div>
</div>

Rules:

Set dimensions with h-* and w-* utilities.
skeleton-text adjusts the shimmer for text-shaped blocks.

11.6 Toast

📖 Docs: https://daisyui.com/components/toast/

Positions stacked elements at a page corner.

Classes:

Type	Classes
Component	`toast`
Placement	`toast-start` `toast-center` `toast-end` `toast-top` `toast-middle` `toast-bottom`

Syntax:

<div class="toast toast-end">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

Rules:

Toast is a positioning wrapper — put any content inside (alerts, buttons, etc.).
Default position is bottom-right. Combine placement classes for other corners.

11.7 Tooltip

📖 Docs: https://daisyui.com/components/tooltip/

Shows a message on hover.

Classes:

Type	Classes
Component	`tooltip`
Part	`tooltip-content`
Placement	`tooltip-top` `tooltip-bottom` `tooltip-left` `tooltip-right`
Color	`tooltip-primary` `tooltip-secondary` `tooltip-accent` `tooltip-info` `tooltip-success` `tooltip-warning` `tooltip-error`
Modifier	`tooltip-open`

Syntax:

<div class="tooltip tooltip-bottom tooltip-primary" data-tip="Tooltip text">
  <button class="btn">Hover me</button>
</div>

Rules:

data-tip attribute sets the tooltip text.
tooltip-open forces it to always show.

12. Components — Data Input

Official docs: https://daisyui.com/components/

12.1 Calendar

📖 Docs: https://daisyui.com/components/calendar/

Styles for third-party calendar/datepicker libraries.

Supported libraries and classes:

Library	Class
Cally	`cally`
Pikaday	`pika-single`
React Day Picker	`react-day-picker`

Syntax (Cally):

<calendar-date class="cally">
  <calendar-month></calendar-month>
</calendar-date>

Syntax (Pikaday):

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

Syntax (React Day Picker):

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

Rules:

daisyUI provides CSS styling only — you must install and configure the calendar library separately.

12.2 Checkbox

📖 Docs: https://daisyui.com/components/checkbox/

Classes:

Type	Classes
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`

Syntax:

<input type="checkbox" class="checkbox checkbox-primary" checked />

12.3 Fieldset

📖 Docs: https://daisyui.com/components/fieldset/

Container for grouping related form elements.

Classes:

Type	Classes
Component	`fieldset` `label`
Part	`fieldset-legend`

Syntax:

<fieldset class="fieldset">
  <legend class="fieldset-legend">Account Details</legend>
  <label class="input">
    <span class="label">Email</span>
    <input type="email" placeholder="you@example.com" />
  </label>
  <p class="label">We'll never share your email.</p>
</fieldset>

12.4 File Input

📖 Docs: https://daisyui.com/components/file-input/

Classes:

Type	Classes
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`

Syntax:

<input type="file" class="file-input file-input-primary file-input-md" />

12.5 Filter

📖 Docs: https://daisyui.com/components/filter/

Group of radio buttons that collapses to the selected option with a reset button.

Classes:

Type	Classes
Component	`filter`
Part	`filter-reset`

Syntax — with form:

<form class="filter">
  <input class="btn btn-square" type="reset" value="×" />
  <input class="btn" type="radio" name="category" aria-label="All" />
  <input class="btn" type="radio" name="category" aria-label="Design" />
  <input class="btn" type="radio" name="category" aria-label="Code" />
</form>

Syntax — without form:

<div class="filter">
  <input class="btn filter-reset" type="radio" name="category" aria-label="×" />
  <input class="btn" type="radio" name="category" aria-label="All" />
  <input class="btn" type="radio" name="category" aria-label="Design" />
</div>

Rules:

Use <form> when possible; fall back to <div> with filter-reset if a form isn't feasible.
Each set of radios needs a unique name.
Use aria-label for the display text.

12.6 Label

📖 Docs: https://daisyui.com/components/label/

Title or name for an input field.

Classes:

Type	Classes
Component	`label` `floating-label`

Syntax — standard label:

<label class="input">
  <span class="label">Username</span>
  <input type="text" placeholder="Type here" />
</label>

Syntax — floating label:

<label class="floating-label">
  <input type="text" placeholder="Email" class="input" />
  <span>Email</span>
</label>

Rules:

In the standard pattern, the input class is on the <label> (the wrapper), not on the <input>.
In floating-label, the <span> must come after the <input>.

12.7 Radio

📖 Docs: https://daisyui.com/components/radio/

Classes:

Type	Classes
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`

Syntax:

<input type="radio" name="radio-group" class="radio radio-primary" checked />
<input type="radio" name="radio-group" class="radio radio-primary" />

12.8 Range

📖 Docs: https://daisyui.com/components/range/

Slider input.

Classes:

Type	Classes
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`

Syntax:

<input type="range" min="0" max="100" value="40" class="range range-primary" />

12.9 Rating

📖 Docs: https://daisyui.com/components/rating/

Star-based rating input.

Classes:

Type	Classes
Component	`rating`
Modifier	`rating-half` `rating-hidden`
Size	`rating-xs` `rating-sm` `rating-md` `rating-lg` `rating-xl`

Syntax:

<div class="rating">
  <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked />
  <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" />
</div>

Rules:

Each rating group needs a unique name.
rating-half enables half-star ratings.
rating-hidden on the first radio allows clearing the selection.

12.10 Select

📖 Docs: https://daisyui.com/components/select/

Dropdown selection list.

Classes:

Type	Classes
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`

Syntax:

<select class="select select-primary select-md">
  <option disabled selected>Pick one</option>
  <option>Option A</option>
  <option>Option B</option>
</select>

12.11 Text Input

📖 Docs: https://daisyui.com/components/input/

Classes:

Type	Classes
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`

Syntax — simple input:

<input type="text" placeholder="Type here" class="input input-primary" />

Syntax — input with icon (wrapper pattern):

<label class="input input-primary">
  <svg><!-- icon --></svg>
  <input type="text" placeholder="Search…" />
</label>

Rules:

Use input on the parent <label> when grouping an icon or label with the input field.
Works with all HTML input types: text, email, password, number, url, search, tel, etc.

12.12 Textarea

📖 Docs: https://daisyui.com/components/textarea/

Multi-line text input.

Classes:

Type	Classes
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`

Syntax:

<textarea class="textarea textarea-primary" placeholder="Your message"></textarea>

12.13 Toggle

📖 Docs: https://daisyui.com/components/toggle/

Checkbox styled as a switch.

Classes:

Type	Classes
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`

Syntax:

<input type="checkbox" class="toggle toggle-primary" checked />

12.14 Validator

📖 Docs: https://daisyui.com/components/validator/

Automatically colors form elements based on HTML5 validation state.

Classes:

Type	Classes
Component	`validator`
Part	`validator-hint`

Syntax:

<input type="email" class="input validator" required placeholder="Email" />
<p class="validator-hint">Please enter a valid email address.</p>

Rules:

Works with native HTML5 validation attributes: required, pattern, min, max, minlength, maxlength, type="email", etc.
Colors the input red (error) when invalid, green (success) when valid.
validator-hint text appears when validation fails.

13. Components — Layout

Official docs: https://daisyui.com/components/

13.1 Divider

📖 Docs: https://daisyui.com/components/divider/

Separates content vertically or horizontally.

Classes:

Type	Classes
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`

Syntax:

<div class="divider">OR</div>
<div class="divider divider-primary"></div> <!-- blank divider -->

In a flex row:

<div class="flex">
  <div>Left</div>
  <div class="divider divider-horizontal">OR</div>
  <div>Right</div>
</div>

13.2 Drawer

📖 Docs: https://daisyui.com/components/drawer/

Sidebar layout that can be toggled.

Classes:

Type	Classes
Component	`drawer`
Part	`drawer-toggle` `drawer-content` `drawer-side` `drawer-overlay`
Placement	`drawer-end`
Modifier	`drawer-open`
Variant	`is-drawer-open:` `is-drawer-close:`

Syntax — responsive sidebar (hidden on mobile, visible on desktop):

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

Collapsible icon sidebar (advanced):

<div class="drawer lg:drawer-open">
  <input id="sidebar" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content"><!-- page content --></div>
  <div class="drawer-side is-drawer-close:overflow-visible">
    <label for="sidebar" class="drawer-overlay"></label>
    <div class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex flex-col min-h-full">
      <ul class="menu w-full grow">
        <li>
          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Home">
            🏠 <span class="is-drawer-close:hidden">Home</span>
          </button>
        </li>
      </ul>
      <div class="m-2">
        <label for="sidebar" class="btn btn-ghost btn-circle is-drawer-open:rotate-y-180">↔️</label>
      </div>
    </div>
  </div>
</div>

Rules:

drawer-toggle is a hidden checkbox. Use <label for="..."> to toggle.
ALL page content (navbar, footer, etc.) must be inside drawer-content.
lg:drawer-open makes sidebar visible on large screens.
drawer-end puts the sidebar on the right side.
is-drawer-open: and is-drawer-close: are conditional variants for styling based on drawer state.

13.3 Footer

📖 Docs: https://daisyui.com/components/footer/

Page footer with links and copyright.

Classes:

Type	Classes
Component	`footer`
Part	`footer-title`
Placement	`footer-center`
Direction	`footer-horizontal` `footer-vertical`

Syntax:

<footer class="footer bg-base-200 text-base-content p-10 sm:footer-horizontal">
  <nav>
    <h6 class="footer-title">Services</h6>
    <a class="link link-hover">Branding</a>
    <a class="link link-hover">Design</a>
  </nav>
  <nav>
    <h6 class="footer-title">Company</h6>
    <a class="link link-hover">About us</a>
    <a class="link link-hover">Contact</a>
  </nav>
</footer>

Rules:

Use sm:footer-horizontal for responsive column-to-row layout.

13.4 Hero

📖 Docs: https://daisyui.com/components/hero/

Large banner/header with title and description.

Classes:

Type	Classes
Component	`hero`
Part	`hero-content` `hero-overlay`

Syntax:

<div class="hero min-h-screen" style="background-image: url(hero-bg.jpg);">
  <div class="hero-overlay bg-opacity-60"></div>
  <div class="hero-content text-center text-neutral-content">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Hello World</h1>
      <p class="py-6">Description text.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Rules:

hero-overlay darkens the background image.
Can contain images, forms, or any content alongside the text.

13.5 Indicator

📖 Docs: https://daisyui.com/components/indicator/

Places an element at the corner of another element.

Classes:

Type	Classes
Component	`indicator`
Part	`indicator-item`
Placement	`indicator-start` `indicator-center` `indicator-end` `indicator-top` `indicator-middle` `indicator-bottom`

Syntax:

<div class="indicator">
  <span class="indicator-item badge badge-secondary">99+</span>
  <button class="btn">Inbox</button>
</div>

Rules:

Default position is top-right (indicator-end indicator-top).
Place all indicator-item elements before the main content.

13.6 Join

📖 Docs: https://daisyui.com/components/join/

Groups multiple items with shared border radius.

Classes:

Type	Classes
Component	`join` `join-item`
Direction	`join-vertical` `join-horizontal`

Syntax:

<div class="join">
  <input class="input join-item" placeholder="Email" />
  <button class="btn join-item btn-primary">Subscribe</button>
</div>

Vertical:

<div class="join join-vertical">
  <button class="btn join-item">Top</button>
  <button class="btn join-item">Middle</button>
  <button class="btn join-item">Bottom</button>
</div>

Rules:

join-item is optional — any direct child gets joined.
Use lg:join-horizontal for responsive layouts.

13.7 Mask

📖 Docs: https://daisyui.com/components/mask/

Clips elements to geometric shapes.

Classes:

Type	Classes
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`

Syntax:

<img class="mask mask-hexagon w-24" src="photo.jpg" />
<img class="mask mask-heart w-24" src="photo.jpg" />
<img class="mask mask-star-2 w-24" src="photo.jpg" />

Rules:

Works on any element — images, divs, videos.
mask-half-1 and mask-half-2 clip to the left/right half of the shape.

13.8 Stack

📖 Docs: https://daisyui.com/components/stack/

Visually layers elements on top of each other.

Classes:

Type	Classes
Component	`stack`
Modifier	`stack-top` `stack-bottom` `stack-start` `stack-end`

Syntax:

<div class="stack w-64">
  <div class="card bg-primary text-primary-content">
    <div class="card-body"><p>Card 1</p></div>
  </div>
  <div class="card bg-secondary text-secondary-content">
    <div class="card-body"><p>Card 2</p></div>
  </div>
  <div class="card bg-accent text-accent-content">
    <div class="card-body"><p>Card 3</p></div>
  </div>
</div>

14. Components — Mockups

Official docs: https://daisyui.com/components/

14.1 Browser Mockup

📖 Docs: https://daisyui.com/components/mockup-browser/

Classes: mockup-browser, mockup-browser-toolbar

<div class="mockup-browser bg-base-300 border border-base-300">
  <div class="mockup-browser-toolbar">
    <div class="input">https://daisyui.com</div>
  </div>
  <div class="bg-base-200 flex justify-center px-4 py-16">
    Hello World!
  </div>
</div>

14.2 Code Mockup

📖 Docs: https://daisyui.com/components/mockup-code/

Classes: mockup-code

<div class="mockup-code">
  <pre data-prefix="$"><code>npm i daisyui</code></pre>
  <pre data-prefix=">" class="text-warning"><code>installing...</code></pre>
  <pre data-prefix=">" class="text-success"><code>Done!</code></pre>
</div>

14.3 Phone Mockup

📖 Docs: https://daisyui.com/components/mockup-phone/

Classes: mockup-phone, mockup-phone-camera, mockup-phone-display

<div class="mockup-phone">
  <div class="mockup-phone-camera"></div>
  <div class="mockup-phone-display">
    <img src="screenshot.jpg" />
  </div>
</div>

14.4 Window Mockup

📖 Docs: https://daisyui.com/components/mockup-window/

Classes: mockup-window

<div class="mockup-window bg-base-300 border border-base-300">
  <div class="bg-base-200 flex justify-center px-4 py-16">
    Hello World!
  </div>
</div>

15. Responsive Design Patterns

Official docs: https://daisyui.com/docs/install/

daisyUI components are designed to be used with Tailwind CSS responsive prefixes (sm:, md:, lg:, xl:, 2xl:).

Common patterns

Pattern	Usage
Responsive card layout	`sm:card-side` — stacks vertically on mobile, horizontal on sm+
Responsive footer	`sm:footer-horizontal` — columns on mobile, row on sm+
Responsive alert	`sm:alert-horizontal` — vertical on mobile, horizontal on sm+
Responsive menu	`lg:menu-horizontal` — vertical on mobile, horizontal on lg+
Responsive drawer	`lg:drawer-open` — toggle-able on mobile, always visible on lg+
Responsive join	`lg:join-horizontal` — vertical on mobile, horizontal on lg+
Responsive steps	`lg:steps-horizontal` — vertical on mobile, horizontal on lg+

Layout best practices

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Flex with wrap -->
<div class="flex flex-wrap gap-2">
  <button class="btn">A</button>
  <button class="btn">B</button>
</div>

16. Best Practices

Official docs: https://daisyui.com/docs/intro/

Do

Use semantic daisyUI colors (bg-primary, text-base-content) instead of Tailwind fixed colors (bg-blue-500).
Combine daisyUI + Tailwind — use daisyUI for component structure, Tailwind for spacing, layout, and fine-tuning.
Make layouts responsive — always use responsive Tailwind prefixes for flex, grid, and component direction classes.
Use role and aria-* attributes — role="alert", role="tablist", aria-label, aria-valuenow.
Keep each radio/checkbox group's name unique across separate groups on the same page.
Prefer <dialog> for modals — better accessibility and native keyboard support.
Use the theme generator at daisyui.com/theme-generator for creating custom themes visually.

Don't

Don't add bg-base-100 text-base-content to <body> unless necessary — it's usually inherited.
Don't add custom fonts unless the design specifically requires it — themes set appropriate fonts.
Don't use the ! override unless Tailwind utilities can't override daisyUI specificity.
Don't use dark: prefix for daisyUI colors — they auto-adapt to the active theme.
Don't write custom CSS when a Tailwind utility or daisyUI class exists for the job.
Don't use tailwind.config.js — Tailwind CSS 4 uses CSS-only configuration.
Don't invent custom class names — only daisyUI classes and Tailwind utilities are allowed.

Placeholder images

For prototyping, use https://picsum.photos/{width}/{height}:

<img src="https://picsum.photos/400/200" alt="Placeholder" />

Quick Reference — All Component Classes

Component	Base Class	Available Modifiers
Accordion	`collapse`	`collapse-title` `collapse-content` `collapse-arrow` `collapse-plus` `collapse-open` `collapse-close`
Alert	`alert`	`alert-outline` `alert-dash` `alert-soft` `alert-info` `alert-success` `alert-warning` `alert-error` `alert-vertical` `alert-horizontal`
Avatar	`avatar`	`avatar-group` `avatar-online` `avatar-offline` `avatar-placeholder`
Badge	`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`
Breadcrumbs	`breadcrumbs`	—
Button	`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`
Calendar	`cally` / `pika-single` / `react-day-picker`	—
Card	`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`
Carousel	`carousel`	`carousel-item` `carousel-start` `carousel-center` `carousel-end` `carousel-horizontal` `carousel-vertical`
Chat	`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`
Checkbox	`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`
Collapse	`collapse`	`collapse-title` `collapse-content` `collapse-arrow` `collapse-plus` `collapse-open` `collapse-close`
Countdown	`countdown`	—
Diff	`diff`	`diff-item-1` `diff-item-2` `diff-resizer`
Divider	`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`
Dock	`dock`	`dock-label` `dock-active` `dock-xs` `dock-sm` `dock-md` `dock-lg` `dock-xl`
Drawer	`drawer`	`drawer-toggle` `drawer-content` `drawer-side` `drawer-overlay` `drawer-end` `drawer-open`
Dropdown	`dropdown`	`dropdown-content` `dropdown-start` `dropdown-center` `dropdown-end` `dropdown-top` `dropdown-bottom` `dropdown-left` `dropdown-right` `dropdown-hover` `dropdown-open` `dropdown-close`
FAB	`fab`	`fab-close` `fab-main-action` `fab-flower`
Fieldset	`fieldset`	`fieldset-legend` `label`
File Input	`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`
Filter	`filter`	`filter-reset`
Footer	`footer`	`footer-title` `footer-center` `footer-horizontal` `footer-vertical`
Hero	`hero`	`hero-content` `hero-overlay`
Hover 3D	`hover-3d`	—
Hover Gallery	`hover-gallery`	—
Indicator	`indicator`	`indicator-item` `indicator-start` `indicator-center` `indicator-end` `indicator-top` `indicator-middle` `indicator-bottom`
Input	`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`
Join	`join`	`join-item` `join-vertical` `join-horizontal`
Kbd	`kbd`	`kbd-xs` `kbd-sm` `kbd-md` `kbd-lg` `kbd-xl`
Label	`label` / `floating-label`	—
Link	`link`	`link-hover` `link-neutral` `link-primary` `link-secondary` `link-accent` `link-success` `link-info` `link-warning` `link-error`
List	`list`	`list-row` `list-col-wrap` `list-col-grow`
Loading	`loading`	`loading-spinner` `loading-dots` `loading-ring` `loading-ball` `loading-bars` `loading-infinity` `loading-xs` `loading-sm` `loading-md` `loading-lg` `loading-xl`
Mask	`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`
Menu	`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`
Modal	`modal`	`modal-box` `modal-action` `modal-backdrop` `modal-toggle` `modal-open` `modal-top` `modal-middle` `modal-bottom` `modal-start` `modal-end`
Mockup Browser	`mockup-browser`	`mockup-browser-toolbar`
Mockup Code	`mockup-code`	—
Mockup Phone	`mockup-phone`	`mockup-phone-camera` `mockup-phone-display`
Mockup Window	`mockup-window`	—
Navbar	`navbar`	`navbar-start` `navbar-center` `navbar-end`
Pagination	`join`	`join-item`
Progress	`progress`	`progress-neutral` `progress-primary` `progress-secondary` `progress-accent` `progress-info` `progress-success` `progress-warning` `progress-error`
Radial Progress	`radial-progress`	—
Radio	`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`
Range	`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`
Rating	`rating`	`rating-half` `rating-hidden` `rating-xs` `rating-sm` `rating-md` `rating-lg` `rating-xl`
Select	`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`
Skeleton	`skeleton`	`skeleton-text`
Stack	`stack`	`stack-top` `stack-bottom` `stack-start` `stack-end`
Stats	`stats`	`stat` `stat-title` `stat-value` `stat-desc` `stat-figure` `stat-actions` `stats-horizontal` `stats-vertical`
Status	`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`
Steps	`steps`	`step` `step-icon` `step-neutral` `step-primary` `step-secondary` `step-accent` `step-info` `step-success` `step-warning` `step-error` `steps-vertical` `steps-horizontal`
Swap	`swap`	`swap-on` `swap-off` `swap-indeterminate` `swap-active` `swap-rotate` `swap-flip`
Tab	`tabs`	`tab` `tab-content` `tabs-box` `tabs-border` `tabs-lift` `tab-active` `tab-disabled` `tabs-top` `tabs-bottom`
Table	`table`	`table-zebra` `table-pin-rows` `table-pin-cols` `table-xs` `table-sm` `table-md` `table-lg` `table-xl`
Text Rotate	`text-rotate`	—
Textarea	`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`
Theme Controller	`theme-controller`	—
Timeline	`timeline`	`timeline-start` `timeline-middle` `timeline-end` `timeline-snap-icon` `timeline-box` `timeline-compact` `timeline-vertical` `timeline-horizontal`
Toast	`toast`	`toast-start` `toast-center` `toast-end` `toast-top` `toast-middle` `toast-bottom`
Toggle	`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`
Tooltip	`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`
Validator	`validator`	`validator-hint`

Generated from daisyUI 5.5.x documentation. For the latest updates, see daisyui.com.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
daisyui-implementation-guide.md		daisyui-implementation-guide.md
llms.txt		llms.txt
readme.md		readme.md

Folders and files

Latest commit

History

Repository files navigation

daisyUI 5 — Complete Implementation Guide

Table of Contents

1. Introduction

1A. Usage Rules

2. Installation

2.1 Node package install

2.2 CDN (no build step)

2.3 Individual component CSS (no Tailwind needed)

2.4 Framework install guides

3. Configuration

3.1 Default configuration

3.2 Configuration options

3.3 Theme configuration examples

3.4 Include / Exclude

3.5 Prefix

3.6 Scoped root

4. Color System

4.1 Semantic color names

4.2 Why semantic colors matter

4.3 Component auto-coloring

4.4 Using colors with Tailwind utilities

4.5 Opacity control

4.6 Color rules

5. Theming

5.1 Built-in themes (35 total)

5.2 Theme switching at runtime

5.3 Creating custom themes

5.4 Customizing a built-in theme

5.5 Theme-specific custom styles

5.6 Using Tailwind's dark: prefix with daisyUI

5.7 CDN custom themes

6. Customization

6.1 Layer 1 — daisyUI classes

6.2 Layer 2 — Tailwind utility classes

6.3 Layer 3 — Important override (!)

6.4 Layer 4 — CSS @utility directive

7. Utility Classes & CSS Variables

7.1 Border radius utilities

7.2 Glass effect

7.3 Theme CSS variables reference

7.4 Component-specific CSS variables

7.5 Customizing component CSS variables

7A. Base Styles

7B. Layout & Typography

Layout

Typography — prose plugin

8. Components — Actions

8.1 Button

8.2 Dropdown

8.3 FAB / Speed Dial

8.4 Modal

8.5 Swap

8.6 Theme Controller

9. Components — Data Display

9.1 Accordion

9.2 Avatar

9.3 Badge

9.4 Card

9.5 Carousel

9.6 Chat Bubble

9.7 Collapse

9.8 Countdown

9.9 Diff

9.10 Hover 3D Card

9.11 Hover Gallery

9.12 Kbd

9.13 List

9.14 Stat

9.15 Status

9.16 Table

9.17 Text Rotate

9.18 Timeline

10. Components — Navigation

10.1 Breadcrumbs

10.2 Dock

10.3 Link

5.6 Using Tailwind's `dark:` prefix with daisyUI

6.3 Layer 3 — Important override (`!`)

6.4 Layer 4 — CSS `@utility` directive

Typography — `prose` plugin