daisyui-ssot

44 min read

Lifecycle: VENDOR/REFERENCE snapshot — sourced from the daisyUI llms.txt. Funday design policy remains defined by the Funday standards pages; this vendor reference does not replace that policy.

daisyUI 5

daisyUI 5 is a CSS library for Tailwind CSS 4. daisyUI 5 provides class names for common UI components, semantic color names and themes.

When to run this skill:

  • Trigger this skill whenever generating any HTML or JSX code
  • Trigger this skill for any Tailwind CSS UI work
  • Trigger this skill when the user mentions any of these terms or similar context:
    daisyUI, component, UI, Tailwind, layout, template, theme, color, design
  • Trigger this skill even if the user does not explicitly ask for it

daisyUI 5 install notes

install guide

  1. daisyUI 5 requires Tailwind CSS 4
  2. 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.
  3. daisyUI 5 can be installed using npm i -D daisyui@latest and then adding @plugin "daisyui"; to the CSS file
  4. 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:
<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>
  1. A CSS file with Tailwind CSS and daisyUI looks like this (if it’s a node dependency)
@import "tailwindcss";
@plugin "daisyui";

CDN

For a no-install browser setup, load the precompiled daisyUI CSS and Tailwind’s browser build:

<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 main CDN file includes the light and dark themes. Load every built-in theme with:

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

Individual daisyUI CSS modules can also be combined from the CDN. The is-drawer-open: and is-drawer-close: variants are not included in CDN files.

Standalone and framework-specific setup

Follow the selected guide’s file paths and integration steps instead of assuming every framework uses the same CSS entry.

daisyUI 5 usage rules

  1. 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)
  2. 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
  3. 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
  4. If a specific component or something similar to it doesn’t exist in daisyUI, you can create your own component using Tailwind CSS utility
  5. when using Tailwind CSS flex and grid for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
  6. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
  7. Ideally, you won’t need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred.
  8. Suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
  9. Suggested - when designing, don’t add a custom font unless it’s necessary
  10. Don’t add bg-base-100 text-base-content to body unless it’s necessary
  11. For design decisions, use Refactoring UI book best practices
  12. Always use the default variant of daisyUI components unless the user asked for a specific variant or color. For example when you need a button, do not use btn btn-primary, prefer btn, unless the user asked for a specific variant.

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

Customizing a component in CSS

Use Tailwind’s @utility directive to customize a daisyUI component globally:

@utility btn {
  @apply rounded-full;
}

daisyUI utilities and variables

  • Semantic colors work with Tailwind color utilities and opacity modifiers, for example bg-primary, border-base-300, and text-base-content/60.
  • rounded-box, rounded-field, and rounded-selector use the active theme’s radius tokens.
  • glass applies the daisyUI glass effect.
  • Components can expose CSS variables for component-specific customization. Examples include --value and --digits on countdown, and --size and --thickness on radial progress.

Base modules

daisyUI includes the properties, rootcolor, scrollbar, rootscrolllock, rootscrollgutter, and svg base modules. Exclude an unwanted module from the plugin config by its module name:

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

Use include or exclude for library modules; use Tailwind utilities or @utility for visual customization.

Config

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

daisyUI without config:

@plugin "daisyui";

daisyUI config with light theme only:

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

daisyUI with all the default configs:

@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

@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 color names

  • 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: Base surface color of the page, used for blank backgrounds
  • base-200: A darker base shade, used to create elevation
  • base-300: An even darker base shade, used to create more elevation
  • 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

daisyUI color rules

  1. daisyUI adds semantic color names to Tailwind CSS colors
  2. 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
  3. daisyUI color names include variables as value so they can change based on the theme
  4. There’s no need to use dark: for daisyUI color names
  5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
  6. If a Tailwind CSS color name (like red-500) is used, it will be the same red color on all themes
  7. If a daisyUI color name (like primary) is used, it will change color based on the theme
  8. 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
  9. *-content colors should have a good contrast compared to their associated colors
  10. Use base-* colors for majority of the page. Use the default variant for all elements. Use primary color once only, for the most important element on the page.
  11. Rare use case when using Tailwind CSS color names (for example text-red-500) is allowed instead of using a daisyUI color name (for example text-error): when a specific content must be indepecent from the theme. For example if a svg icon or a chart graph must use a specific color, no matter what are our brand colors or theme colors.

Enabling and applying themes

The default configuration enables light and dark. Choose specific themes, every theme, or no built-in themes in the daisyUI plugin:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
  • Use themes: all; to enable every built-in theme.
  • Use themes: false; to disable all built-in themes, usually before defining only custom themes.
  • Add data-theme="THEME_NAME" to <html> or any nested element. Themes can be nested without a fixed depth limit.
<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Nested theme</div>
  </section>
</html>

daisyUI custom theme with custom colors

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

@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. If 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. If 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. If 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 */
}

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.

Customize an existing theme

Use the built-in theme’s name and override only the values that need to change. Other values are inherited:

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

For a custom CDN theme, define the same variables under a selector that matches the chosen data-theme and checked theme controller:

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* define the remaining custom-theme variables */
}

To make Tailwind’s dark: variant follow one or more daisyUI themes, define a custom variant:

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

Component discovery protocol

Before writing any daisyUI code, do this in order:

  1. Read the request intent, behavior, and shape, not only literal words. Match on meaning.
  2. Use the component list in this file to shortlist the best candidate components.
  3. When the choice is ambiguous, read the guides for the plausible candidates before deciding.
  4. Compare each candidate’s description, behavior, syntax, and rules against the request.
  5. Select the best component or combination of components and apply their constraints exactly.
  6. Apply the chosen components’ structure and constraints exactly.

Semantic matching is required even when wording differs from component names. A component name might be different from the request but still be the best match. Always consider intent and meaning, not only literal words.

If a user explicitly requests a named component and a same-named doc exists, read that component doc first.

daisyUI components

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

Syntax

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

where content is:

<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

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

Syntax

<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

aura

Aura is a border light effect that can wrap around any component. It is a great way to add a cool, eye-catching visual effect to your components. Aura is useful for the most important button, card, or div that you want to highlight. aura docs

Class names

  • component: aura
  • style: aura-dual, aura-rainbow, aura-holo, aura-gold, aura-silver, aura-glow
  • size: aura-xs, aura-sm, aura-md, aura-lg, aura-xl

Syntax

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

Rules

  • {MODIFIER} is optional and can have one of each style/size class names
  • you can set custom colors using text-* color classes. For example, text-primary will use the primary color for the aura
  • you can set custom background color using bg-* color classes. For example, bg-secondary will use the secondary color for the background of the aura
  • you can set custom animation duration using duration-* classes. For example, duration-1000 will set the animation duration to 1 second
  • aura must have one direct child element
  • aura is good for a button, or a card or a div that you want to highlight
  • do not use aura for multiple elements on the same page because it can be visually overwhelming

avatar

Avatars are used to show a thumbnail

avatar docs

Class names

  • component: avatar, avatar-group
  • modifier: avatar-online, avatar-offline, avatar-placeholder

Syntax

<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

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

Syntax

<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

Breadcrumbs helps users to navigate

breadcrumbs docs

Class names

  • component: breadcrumbs

Syntax

<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

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

Syntax

<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

calendar

Calendar includes styles for different calendar libraries

calendar docs

Class names

  • component
    • cally (for Cally web component)
    • react-day-picker (for the DayPicker component)
    • vc (for Vanilla Calendar Pro)

Syntax

For Cally:

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

For React Day Picker:

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

For Vanilla Calendar Pro:

<div id="calendar" class="vc"></div>
import { Calendar } from "vanilla-calendar-pro"
 
const calendar = new Calendar("#calendar")
calendar.init()

Or using CDN:

<script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js" defer></script>
<div id="calendar" class="vc"></div>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const { Calendar } = window.VanillaCalendarPro
    const calendar = new Calendar("#calendar")
    calendar.init()
  })
</script>

Rules

  • daisyUI supports Cally, React Day Picker and Vanilla Calendar Pro

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

Syntax

<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-side for responsive layouts
  • If image is placed after card-body, the image will be placed at the bottom

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

Syntax

<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

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

Syntax

<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

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

Syntax

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

Rules

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

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

Syntax

<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

countdown

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

countdown docs

Class names

  • component: countdown

Syntax

<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

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

Syntax

<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

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

Syntax

<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

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

Class names

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

Syntax

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

where content is a list of buttons:

<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 responsiveness of the dock in iOS

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, drawer-button
  • placement: drawer-end
  • modifier: drawer-open
  • variant: is-drawer-open:, is-drawer-close:

Syntax

<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:

<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:

<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:

<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 icons, when it’s open we see icons and text

<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">
            {ICON_HERE}
            <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">
            {ICON_HERE}
            <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">
          {ICON_HERE}
        </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

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

Syntax

Using popover API

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

Using details and summary (only opens/closes on click)

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

Rules

  • {MODIFIER} is optional and can have one of the modifier/placement class names
  • replace {id} and {anchor} with a unique name
  • The content can be any HTML element (not just <ul>)
  • For popover API method, we don’t use dropdown-content. Only button and a dropdown

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

Class names

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

Syntax

A single FAB in the corner of screen

<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

<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

<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.

<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

<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

<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

<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

<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

fieldset

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

fieldset docs

Class names

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

Syntax

<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

file-input

File Input is 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

Syntax

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

Rules

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

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

Syntax

Using HTML form

<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

<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
  • Do not check any of the radio inputs by default

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

Syntax

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

where content can contain several <nav> tags with footer-title and links inside

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

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

Syntax

<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

hover-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

Class names

  • component: hover-3d

Syntax

<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 Gallery is container of images. The first image is visible by default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfolios or in image galleries. Hover Gallery can include up to 10 images.

hover-gallery docs

Class names

  • component: hover-gallery

Syntax

<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

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

Syntax

<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

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

Syntax

<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

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

Syntax

<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

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

Syntax

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

Rules

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

label

Label is used to provide a name or title for an input field. Label can be placed before or after the field

label docs

Class names

  • component: label, floating-label

Syntax

For regular label:

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

For floating label:

<label class="floating-label">
  <input type="text" placeholder="Type here" class="input" />
  <span>{label text}</span>
</label>

Rules

  • The input class is for styling the parent element which contains the input field and label, so the label does not have the ‘input’ class
  • Use floating-label for the parent of an input field and a span that floats above the input field when the field is focused

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

Syntax

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

Rules

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

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

Syntax

<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

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

Syntax

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

Rules

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

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

Syntax

<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-*

megamenu

A megamenu is a large, horizontal menu where each item opens a popover to show a large block of navigation links. Megamenu must be used once, on top of the page. Inside each popover, you can use a daisyUI menu, or any custom content. Megamenu fits better on large screens only, and for small screens, you can hide the megamenu and show the content in a dropdown or a drawer.

megamenu docs

Class names

  • component: megamenu
  • part: megamenu-active
  • modifier: megamenu-wide, megamenu-full
  • direction: megamenu-vertical
  • size: megamenu-xs, megamenu-sm, megamenu-md, megamenu-lg, megamenu-xl

Syntax

<button class="btn sm:hidden" popovertarget="my-megamenu-1">Menu</button>
<div class="megamenu max-sm:megamenu-vertical {MODIFIER} p-2 border border-base-300" id="my-megamenu-1" popover>
  <span class="megamenu-active"></span>
 
  <button popovertarget="item-1">button 1</button>
  <div id="item-1" popover>
    {CONTENT}
  </div>
 
  <button popovertarget="item-2">button 2</button>
  <div id="item-2" popover>
    {CONTENT}
  </div>
 
</div>

Example of megamenu-wide with lots of menu items

<button class="btn sm:hidden" popovertarget="my-megamenu-2">Menu</button>
<div class="megamenu max-sm:megamenu-vertical megamenu-wide w-full p-2 border border-base-300" id="my-megamenu-2" popover>
  <span class="megamenu-active"></span>
  <button popovertarget="c1">One</button>
  <div id="c1" popover>
    <div class="flex max-sm:flex-col items-start">
      <ul class="menu w-full md:menu-horizontal">
        <li>
          <a>first column menu item</a>
          <ul><li><a>sub menu item</a></li></ul>
        </li>
        <li>
          <a>second column menu item</a>
          <ul><li><a>sub menu item</a></li></ul>
        </li>
        <li>
          <a>third column menu item</a>
          <ul><li><a>sub menu item</a></li></ul>
        </li>
      </ul>
      <img src="{image-url}" class="md:max-w-sm max-md:w-auto" alt="sample image at the end of the megamenu">
    </div>
  </div>
</div>

Rules

  • {MODIFIER} is optional and can have one of the modifier class names and one of the size class names
  • megamenu-active span is mandatory. it’s the indicator that moves under the active item
  • Each button must have a corresponding popover with the same id as the popovertarget value. HTML IDs must be unique.
  • {CONTENT} can include a daisyUI menu (<ul class="menu"><li><a>List item 1</a></li></ul>), or any custom content
  • you can put horizontal menu inside the popover like <ul class="menu menu-horizontal"><li><a>List item 1</a></li></ul>, or any other variation of daisyUI menu component
  • On small screens the whole megamenu is hidden using max-sm:megamenu-vertical class and it will be vertical when visible. The button with popovertarget="my-megamenu-1" opens the megamenu with id="my-megamenu-1" popover
  • On large screens, we hide the button using sm:hidden and the megamenu will be a horizontal menu, and each button inside the megamenu will open its corresponding popover.
  • megamenu can have max 10 popovers inside it
  • to hide the arrow from the buttons, use after:content-none class on the buttons

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, menu-paged
  • size: menu-xs, menu-sm, menu-md, menu-lg, menu-xl
  • direction: menu-vertical, menu-horizontal

Syntax

Vertical menu:

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

Horizontal menu:

<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-paged to show one submenu level at a time; the open <summary> becomes the back button
  • Use menu-dropdown and menu-dropdown-toggle to toggle the dropdown using 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

Syntax

<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-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

Syntax

<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

mockup-phone

Phone mockup shows a mockup of an iPhone

mockup-phone docs

Class names

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

Syntax

<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-window

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

mockup-window docs

Class names

  • component: mockup-window

Syntax

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

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

Syntax

Using HTML dialog element (recommended)

<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>

If we want it to close when clicking outside:

<button class="btn" onclick="my_modal.showModal()">open modal</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click outside to close</p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

Using popover API (recommended only if we DON’T want to trap the keyboard navigation in the modal)

<button popovertarget="my_modal" class="btn">Open modal</button>
<div class="modal" popover id="my_modal">
  <div class="modal-box">
    {CONTENT}
    <div class="modal-action">
      <button popovertarget="my_modal" popovertargetaction="hide">close</button>
    </div>
  </div>
</div>

If we want it to close when clicking outside:

<button class="btn" popovertarget="my_modal">Open</button>
 
<div class="modal" id="my_modal" popover>
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
  </div>
  <div class="modal-backdrop">
    <button popovertarget="my_modal" popovertargetaction="hide">close</button>
  </div>
</div>

Using checkbox (legacy)

<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)

<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
  • Use unique IDs for each modal
  • For HTML dialog element modals, add <form method="dialog"> for closing the modal with submit

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

Syntax

<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

OTP

OTP (One-Time Password) component for inputting verification codes. It’s usually 4 to 6 digits long and is used for two-factor authentication (2FA) or passwordless login.

OTP docs

Class names

  • component: otp
  • size: otp-xs, otp-sm, otp-md, otp-lg, otp-xl
  • modifier: otp-joined
  • color: otp-neutral, otp-primary, otp-secondary, otp-accent, otp-info, otp-success, otp-warning, otp-error

Syntax

<label class="otp {MODIFIER}">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

Rules

  • {MODIFIER} is optional and can have one of the size/color class names
  • otp-joined modifier connects the character boxes together
  • the otp class is for a label. The label should have 4 to 6 empty <span> elements for the visual representation of each digit and an input field for entering the code
  • The number of <span> elements must match the maxlength attribute and the pattern in the input field. For example, if you have 6 <span> elements, the input should have maxlength="6" and pattern="\d{6}"
  • autocomplete="one-time-code" and inputmode="numeric" are important for mobile devices to show the appropriate keyboard and to allow autofill of the OTP code

pagination

Pagination is a group of buttons

pagination docs

Class names

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

Syntax

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

Rules

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

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

Syntax

<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

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

Syntax

<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} and role="progressbar" 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

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

Syntax

<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

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
  • direction: range-vertical (vertical slider)

Syntax

<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
  • For a vertical slider use range-vertical
  • You must specify min and max attributes

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

Syntax

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

For a read-only (non-interactive) rating, use <div> elements instead of radio inputs and mark the selected one with aria-current="true":

<div class="rating">
  <div class="mask mask-star" aria-label="1 star"></div>
  <div class="mask mask-star" aria-label="2 star" aria-current="true"></div>
  <div class="mask mask-star" aria-label="3 star"></div>
</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
  • For a read-only/non-interactive rating, use <div> elements instead of the radio inputs and mark the selected one with aria-current="true"

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

Syntax

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

Rules

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

skeleton

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

skeleton docs

Class names

  • component: skeleton
  • modifier: skeleton-text

Syntax

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

Example with text skeleton:

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

Rules

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

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

Syntax

<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

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

Syntax

<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

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

Syntax

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

Rules

  • {MODIFIER} is optional and can have one of the color/size class names
  • This compnent renders a small visual indicator to draw attention

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

Syntax

<ul class="steps {DIRECTION}">
  <li class="step step-primary">{completed step}</li>
  <li class="step">{upcoming step}</li>
</ul>

Rules

  • Steps are horizontal by default; add steps-vertical to the ul for a vertical layout
  • Direction classes go on steps; step-* color classes go on individual step items
  • To mark a step with the primary color, add step-primary to that li
  • You can add an icon in each step using step-icon class
  • To display custom data, add data-content="{value}" to the <li>

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

Syntax

Using checkbox

<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

<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

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
  • Size: tabs-xs, tabs-sm, tabs-md, tabs-lg, tabs-xl
  • Modifier: tab-active, tab-disabled
  • Placement: tabs-top, tabs-bottom

Syntax

Using buttons:

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

Using radio inputs:

<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

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

Syntax

<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

text-rotate

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

text-rotate docs

Class Names:

  • Component: text-rotate

Syntax

<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

<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

<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

<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)

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

Syntax

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

Rules

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

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

Class names

  • component: theme-controller

Syntax

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

Rules

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

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

Syntax

<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

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

Syntax

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

Rules

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

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

Syntax

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

Rules

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

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
  • alignment: tooltip-start, tooltip-center, tooltip-end
  • color: tooltip-primary, tooltip-secondary, tooltip-accent, tooltip-info, tooltip-success, tooltip-warning, tooltip-error

Syntax

<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

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

Syntax

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

Rules

  • Use with input, select, textarea

Ask Docs

AI assistant to help answer questions about the documentation. Answers are read-only and cite docs/source.

Hi! How can I help you with the documentation today? Answers are read-only and cite docs/source.

Ctrl+Enter to send