DOCSEARCHbyAlgolia
Submit Docs

daisyUI 5

website·Indexed 39 days ago

https://daisyui.com

A component library for Tailwind CSS. Documentation covers installation via CDN or framework-specific setups, component syntax, CSS customization, and configuration of base modules and colors.

Tokens
8.7K
Snippets
74
Records
77
Agent score
74%

What's inside daisyUI

  1. Use daisyUI 5 via CDN

    For browser-based setups without a build process, load the precompiled daisyUI CSS and the Tailwind browser build. The main CDN file includes light and dark themes; use the themes.css file to load all built-in themes.
    <!-- Basic setup (light and dark themes) -->
<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>

<!-- Load all built-in themes -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

  2. Change daisyUI components globally in CSS

    Use the Tailwind @utility directive to apply global changes to a daisyUI component.
    @utility btn {
  @apply rounded-full;
}

  3. Install daisyUI 5 with Tailwind CSS 4

    daisyUI 5 requires Tailwind CSS 4. The tailwind.config.js file is deprecated in v4 and should not be used. To install daisyUI 5 as a Node.js dependency, install the package and add the @plugin directive to your CSS file.
    npm i -D daisyui@latest
    @import "tailwindcss";
@plugin "daisyui";

  4. Apply daisyUI 5 styling and overrides

    Follow these rules when styling with daisyUI 5:

    1. Use daisyUI component class names (including parts and modifiers).
    2. Use Tailwind CSS utility classes for custom changes (e.g., btn px-10).
    3. Use the ! important modifier at the end of a Tailwind utility if CSS specificity prevents a style change (e.g., bg-red-500!).
    4. Use responsive utility prefixes when using flex or grid layouts.
    5. Use default variants (e.g., btn) unless a specific color or variant is requested.

  5. Implement a Modal dialog in daisyUI

    daisyUI provides several ways to implement modals. The recommended approach is using the HTML <dialog> element for native accessibility and behavior. Alternatively, the Popover API can be used if keyboard navigation trapping is not required. Legacy methods include using checkboxes or anchor links.

    Key rules:

    • Use a unique HTML ID for each modal.
    • For <dialog> elements, use <form method="dialog"> to allow the submit action to close the modal.
    <!-- Recommended: HTML dialog -->
<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>

<!-- Popover API (No keyboard trap) -->
<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>

  6. Modify a built-in daisyUI theme

    To change specific colors of a built-in theme, use the @plugin "daisyui/theme" block with the name of the existing theme. daisyUI will inherit all other values from the original theme.
    @plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

  7. Create a custom daisyUI theme

    Custom themes are defined using the @plugin "daisyui/theme" block. You must define the color variables, border radii, and sizing variables. Colors can be defined using OKLCH, hex, or other standard CSS color formats.
    @import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true;
  prefersdark: false;
  color-scheme: light;

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

  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

  8. Apply and configure daisyUI themes

    Themes are enabled via the daisyUI plugin configuration. You can specify a list of themes, enable all, or disable all built-in themes to use only custom ones. Themes are applied to the HTML by adding the data-theme attribute to the <html> tag or any nested element, allowing for nested theme scoping.
    @plugin "daisyui" {
  /* Enable specific themes: light (default), dark (prefers-color-scheme), and cupcake */
  themes: light --default, dark --prefersdark, cupcake;
}

/* To enable all built-in themes */
/* themes: all; */

/* To disable all built-in themes */
/* themes: false; */
    <html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Nested theme</div>
  </section>
</html>

  9. Integrate Calendar components

    daisyUI provides styling for three specific calendar libraries: Cally, React Day Picker, and Vanilla Calendar Pro.
    <!-- Cally -->
<calendar-date class="cally">{CONTENT}</calendar-date>

<!-- React Day Picker -->
<DayPicker className="react-day-picker"></DayPicker>

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

  10. Build a large navigation menu with Megamenu

    A megamenu is a large horizontal menu typically used at the top of a page for large screens. It utilizes the HTML popover attribute for its dropdowns. On small screens, it is recommended to hide the megamenu and use a dropdown or drawer instead. Modifiers include megamenu-wide, megamenu-full, and megamenu-vertical.
    <!-- Trigger for mobile -->
<button class="btn sm:hidden" popovertarget="my-megamenu-1">Menu</button>

<!-- Megamenu Container -->
<div class="megamenu max-sm:megamenu-vertical p-2 border border-base-300" id="my-megamenu-1" popover>
  <span class="megamenu-active"></span>

  <button popovertarget="item-1">Products</button>
  <div id="item-1" popover>
    {CONTENT}
  </div>
</div>

  11. Implement a Dropdown menu

    Dropdowns can be implemented using the native Popover API or the <details>/<summary> elements.

    • Popover API: Use popovertarget on the button and the popover attribute on the .dropdown element. Use CSS anchor names (anchor-name and position-anchor) for positioning. Do not use .dropdown-content with this method.
    • Details/Summary: Use the <details> element with the .dropdown class for a click-to-open menu.
    • Placement: Use classes like dropdown-start, dropdown-center, dropdown-end, dropdown-top, dropdown-bottom, dropdown-left, or dropdown-right.
    <!-- Popover API Method -->
<button popovertarget="menu-1" style="anchor-name:--menu-anchor">Open Menu</button>
<ul class="dropdown" popover id="menu-1" style="position-anchor:--menu-anchor">
  <li>Item 1</li>
</ul>

<!-- Details/Summary Method -->
<details class="dropdown">
  <summary>Click Me</summary>
  <ul class="dropdown-content">
    <li>Item 1</li>
  </ul>
</details>

  12. Understand daisyUI 5 semantic color names

    daisyUI uses semantic color names that map to CSS variables, allowing colors to change automatically based on the active theme. Avoid using hardcoded Tailwind colors (e.g., text-gray-800) for text on base backgrounds, as they may become unreadable in dark themes.

    Key Color Tokens:

    • primary, secondary, accent: Brand colors.
    • neutral: Dark neutral for non-saturated areas.
    • base-100, base-200, base-300: Surface colors for backgrounds (increasing elevation).
    • info, success, warning, error: State/message colors.
    • *-content: Foreground colors designed to contrast with their corresponding base color (e.g., primary-content for use on primary).