daisyUI 5 release notes

Everything about the new daisyUI 5 release

Welcome! 🎉

daisyUI, the essential component library for Tailwind CSS is now being used in360,000 open source projects, with 19 million npm installs (350 thousand weekly installs). daisyUI is growing faster than before and today it's helping many people, startups and companies to create improve their development experience.

💚 daisyUI became possible thanks to your incredible contributions, helpful feedback, and amazing support. Thank you!

Since the release of daisyUI 4 in 2023, a lot of feedback, feature requests, and bug reports have been received. Big efforts went into preparing daisyUI for this major release, using the latest web standards and new CSS/HTML features, as well as all the amazing new Tailwind CSS 4 features.

Here's daisyUI 5 with a lot of new features, improvements, and bug fixes. It's a huge update, I added TLDR for each section to make it easier to read.

Let's begin!

Table of Contents

Install
Core Improvement
Build and integration improvements
Design System Improvements
Themes and styling
New components
Major component improvements
Component design improvements
Component size scale improvements
Detailed Changelog
Breaking changes in class names
Breaking changes in design system
Breaking changes in config
Breaking changes in themes
Bug fixes
Get started with daisyUI 5

Install

1. Core Improvement

TLDR – daisyUI 5 is compatible with Tailwind CSS 4, has zero dependencies, a smaller package size, smaller CSS size, and is more customizable. CSS variables are now more readable and more flexible.
Skip to the next section

Tailwind CSS 4 compatibility

Tailwind CSS 4 is crazy good! A lot of new features and improvements are added and also many changes to the plugin API.

daisyUI 5 works with Tailwind CSS 4 and takes advantage of all the new features.

With Tailwind CSS 4, you can now import daisyUI as a plugin in the CSS file.

Before

// tailwind.config.{js,ts,mjs,cjs}
module.exports = {
  content: ["./src/**/*.{html,js}"],
  plugins: [
    require('daisyui');
  ],
}

After

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

SeeTailwind CSS upgrade guidefor more information.

Zero dependencies

Reducing the number of dependencies in your project is important for many reasons. It leads to faster build times and better performance in your workflow. Fewer dependencies also make your app more secure by reducing the chance of potential for vulnerabilities from less maintained packages. Also, managing a smaller dependency tree makes maintenance easier and reduces the chance of deprecation problems or version conflict in the long term.

Last year I reduced the number of dependencies in daisyUI, from ~100 (dependencies + sub dependencies in total) to 7!

This time we got rid of all the remaining ones!
daisyUI 5 has no dependencies. Hopefully this helps to clean up your node_modules a little bit.

Before

Dependencies - Total 1.8 MB on disk (250 files)
  ├╴ culori
  ├╴ picocolors
  ├╴ postcss-js
  │  ╰╴ camelcase-css
  ╰╴ css-selector-tokenizer
     ├╴ cssesc
     ╰╴ fastparse

After

No dependencies - 0 kB

Smaller size

With daisyUI as a Tailwind CSS plugin, only the needed styles are included in the final CSS file. Other than that we have made a lot of optimizations to make both package size and CSS file size smaller.

daisyUI 5 NPM package is 61% smaller in size.

Before: Install size – 4.7 MB
After: Install size – 1.8 MB

daisyUI 5 CDN file, including all possible class names, is 75% smaller in size

Before: full.css – 137 kB compressed
After: daisyui.css – 34 kB compressed

It is now safe and efficient to use the CDN file in production. The compressed CSS file, is now 34 kB only thanks to native CSS nesting and huge amount of optimizations in daisyUI 5. This is the smallest size ever for the daisyUI CDN file, including all the possible daisyUI components and colors, available for all Tailwind CSS responsive prefixes. This is a CSS file, minified, compressed and cached on CDN.

Improved color variables

With Tailwind CSS 3 and daisyUI 4, we had to extract the color values of each color into CSS variables, and pass it to Tailwind CSS alongside a special<alpha-value>variable so Tailwind CSS could generate opacity variables for each color utility class.

Tailwind CSS 4 doesn't have this limitation because it uses CSScolor-mix()to control the opacity.

With daisyUI 5 we can finally put the whole color inside CSS variables. All color formats are supported, no transformation is needed no JS object is needed.

We also updated the variable names to be more readable in the output CSS, which means you can even customize the color values using the browser dev tools color picker.

Before

/* hard to read variable names, hard to customize values */
{
--b1: 100% 0 0;
--b2: 96.1151% 0 0;
--b3: 92.4169% .00108 197.137559;
--bc: 27.8078% .029596 256.847952;
--p: 49.12% .3096 275.75;
--pc: 89.824% .06192 275.75;
--s: 69.71% .329 342.55;
--sc: 98.71% .0106 342.55;
--a: 76.76% .184 183.61;
--ac: 15.352% .0368 183.61;
--n: 32.1785% .02476 255.701624;
--nc: 89.4994% .011585 252.096176;
--in: 72.06% .191 231.6;
--inc: 0% 0 0;
--su: 64.8% .15 160;
--suc: 0% 0 0;
--wa: 84.71% .199 83.87;
--wac: 0% 0 0;
--er: 71.76% .221 22.18;
--erc: 0% 0 0;
}

After

/* standard color format, easy to customize in browser */
{
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(96.115% 0 0);
--color-base-300: oklch(92.416% 0.001 197.137);
--color-base-content: oklch(27.807% 0.029 256.847);
--color-primary: oklch(49.12% 0.309 275.75);
--color-primary-content: oklch(89.824% 0.061 275.75);
--color-secondary: oklch(69.71% 0.329 342.55);
--color-secondary-content: oklch(98.71% 0.01 342.55);
--color-accent: oklch(76.76% 0.184 183.61);
--color-accent-content: oklch(15.352% 0.036 183.61);
--color-neutral: oklch(20% 0.024 255.701);
--color-neutral-content: oklch(89.499% 0.011 252.096);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
}

edit daisyui tailwindcss colors in devtools

2. Build and integration improvements

TLDR – Import only the parts you need.
Micro CSS files are now available for no-build projects.
Native CSS nesting reduces CSS size.
It's ESM compatible and has dependency-free class name prefixing.
Skip to the next section

Native CSS nesting

CSS nesting is now supported on all browsers. daisyUI 5 uses CSS nesting which prevents duplication of CSS rules and results smaller CSS size in your browser!

ESM compatibility

daisyUI 5 is now ESM (ECMAScript Module) compatible. Which means you can import and use specific parts of the library in JS if you need to.

Dependency-free class name prefixing

daisyUI 5 can now prefix class names without a dependency.

Micro CSS files for No-Build projects

For server-side rendered projects (Rails, Django, PHP, etc) or projects that don't have a JS build step (HTMX, Alpine.js, WordPress, etc), it's now possible to use specific parts of daisyUI without including the entire library or even without Tailwind CSS.

For example if you only want to use daisyUI toggle component, include a tiny CSS file that only contains the styles for the toggle component:

Before

Not possible

After

https://cdn.jsdelivr.net/npm/daisyui@5/components/toggle.css

All components, all themes, and basically every single part of daisyUI libraryis now available as compressed. minified CSS files on CDN.

Also, with the 75% smaller daisyui.css (formerly full.css) CDN file, it is now safe and efficient to use the CDN file in production. The compressed CSS file, is now 34 kB only thanks to native CSS nesting and huge amount of optimizations in daisyUI 5.

Tailwind CSS component library daisyui CDN file

Check out theCDN docsto customize the parts of the library you want to include in your project from the CDN.

Include and Exclude parts of the library

Now for the first time, it's possible to include/exclude specific parts of daisyUI library. For example if you only want to use the "Toggle" component, you can include only the "Toggle" component and exclude everything else!

Before

Not possible

After

@plugin "daisyui" {
  include: toggle;
}

Or if you want to exclude a specific part of the library, you can do that too!

Before

Not possible

After

@plugin "daisyui" {
  exclude: scrollbar;
}

3. Design System Improvements

TLDR – New "Effect" CSS variables.
Size improvements + newxlsize modifier.
New component style modifiers:*-softand*-dash.
Color format flexibility.
Skip to the next section

New "Effect" CSS variables

daisyUI 5 introduces a new set of effects that can be enabled or disabled globally or per theme. These effects change the look and feel of relevant components, like buttons, checkbox, toggle, etc.

Currently, the following effects are available:

--depth: adds a clean, subtle depth effect to the components, making them look more visually appealing
--noise: adds a slight noise effect to the components, giving them a more textured look

These effects can be enabled or disabled using a CSS variable. Check out the newTheme Generatorpage to see how it works.

New "X-Large" size

All components that previously hadxs,sm,md, andlgsize modifiers now also support a newxlsize modifier. This gives you more control over the size of components and allows you to create more flexible and responsive designs.

Size scale improvements

With the addition of the newxlsize modifier, the size scale of components has been adjusted to make it consistent. The new size scale is more harmonious and visually appealing.

In daisyUI 4, the size difference between sizes was not following a consistent scale.
The new default size scale is consistent and more visually appealing ...and it's customizable!

Button height scale	Before	After
`xs`	6 × 4 = 24px	6× 4 = 24px
`sm`	8 × 4 = 32px	8× 4 = 32px
`md`	12× 4 = 48px	10× 4 = 40px
`lg`	16× 4 = 64px	12× 4 = 48px
`xl`	-	14× 4 = 56px

Checkbox height scale	Before	After
`xs`	4 × 4 = 16px	4× 4 = 16px
`sm`	5 × 4 = 20px	5× 4 = 20px
`md`	6 × 4 = 24px	6× 4 = 24px
`lg`	8× 4 = 32px	7× 4 = 28px
`xl`	-	8× 4 = 32px

Size scale customization

Component size scales are now customizable. Previously, customizing the size of components required a lot of manual work.
Now everything is tokenized with CSS variables, You can define the size scale of the components globally or per theme, making them shorter or taller, based on your design needs.

--size-fieldvariable is used to define the base size of fields like input, button, tab, etc.
--size-selectorvariable is used to define the base size of selectors like checkbox, radio, toggle, badge, etc.

See how it works in the newTheme Generatorpage.

Border size customization

Border size of buttons, inputs, tab, et are now customizable globally or per theme.

--bordervariable is used to define the border size of components like button, input, tab, etc.

See how it works in the newTheme Generatorpage.

New component styles: "soft" and "dash"

Components likebutton,badge,alertnow havesoftanddashstyles.
softstyle makes the component look softer anddashstyle adds a dashed border to the component.

All modifier classes are now responsive

daisyUI 5 makes all modifiers responsive by default. This means you can use responsive modifiers likemd:,lg:, etc. with all component modifier classes, not just a selected few.

Color format flexibility

daisyUI 5 supports all color formats and doesn't convert your colors to a specific format.

Before Tailwind CSS 4, color values of utility classes had to be generated at build time so the only way to have CSS variables for colors and being able to use Tailwind CSS opacity modifiers was to use a specific color format and pass it tailwind to generate the opacity variables.
Tailwind CSS 4 now uses CSS variables for colors andcolor-mix()to control the opacity. This means we can use any color format we want and no transformation is needed.
daisyUI built-in themes still use OKLCH color format and I would recommend using OKLCH for custom themes too, but you can use any color format you want and neither daisyUI nor Tailwind CSS will convert it to another format at build time.

4. Themes and styling

Themes and colors are what makes your website unique. We've made significant improvements to the themes and colors in daisyUI 5, including new themes, improved existing themes, and a new Theme Generator to help you create your own custom themes.

TLDR – New themes + improved existing themes.
New Theme Generator to create custom themes.
Skip to the next section

New themes

daisyUI 5 includes 3 new themes:

caramellatte– Warm, cozy, light theme featuring brown and beige
abyss– Deep dark green, teal and phosphorus color palette
silk– Bright, clean and bold theme with fluorescent text colors

Existing themes improvements

Most daisyUI themes have been adjusted to look better and consistent. color contrast and accessibility got even better and the colors are more harmonious. These changes make the color more visually appealing and easier to read.

All-new Theme Generator

Check out the newTheme Generatorpage to create your own custom theme. Create, customize or extend themes, or generate stunning new themes using the new daisyUI color palette generator algorithm.

5. New components

daisyUI 5 introduces new components to help you build websites faster.

TLDR – New components:List,Status,Fieldset,Label,Filter,Calendar,Validator,Dock.
Skip to the next section

List

List is is useful for vertical layout to display information in rows. Imagine a list of products, list of people, list of articles, etc.

SeeList component docs

Status

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

Available in 5 sizes:xs,sm,md,lg, andxl.

SeeStatus component docs

Fieldset

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

SeeFieldset component docs

Label

Label provides a name or title for an input field. Label can be placed before or after the field. floating-label is a label that floats above the field when the field is focused.

SeeLabel component docs

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.

SeeFilter component docs

Calendar

daisyUI 5 provides all the necessary styles for 3 popular calendar/datepicker libraries: Cally, Pikaday, and React Day Picker.
This means you can use any of these libraries the style will be compatible with daisyUI colors and styles.

Cally is a web component calendar datepicker and it works everywhere
Pikaday is a simple and easy-to-use JS datepicker and it works everywhere
React Day Picker is a flexible date picker for React

SeeCalendar component docs

Validator

Validator class changes the color of form elements toerrororsuccessbased on input's validation rules. It can also show a hint text below the input if it's invalid.

SeeValidator component docs

Dock

A redesigned replacement for "bottom navigation" component. Dock is a horizontal navigation bar that sticks to the bottom of the screen, new design, new look and more customizable.

Available in 5 sizes:xs,sm,md,lg, andxl.

Compatible with safe-area-inset-bottom on mobile devices.

SeeDock component docs

6. Major component improvements

These components had significant improvements in daisyUI 5, including new modifiers, new features, and better customization options.

TLDR – Some components got significant improvements, including new modifiers, new features, and better customization options.
Some components have improved visual appeal.
Skip to the next section

Alert– New soft/dash styles, new vertical/horizontal layout options
Badge– New soft/dash styles
Button– New hover behavior for ghost/outline styles, new soft/dash styles
Card– New radio card functionality, new dash variant
Checkbox– New design, accessibility improvements
Countdown– Accessibility improvements
Diff– Better iOS Safari support, improved Firefox performance, accessibility improvements
Dock (formerly bottom-navigation)– New design, accessibility improvements
Drawer– Improved accessibility
Dropdown– Popover API, Anchor Positioning, new dropdown-center modifier, accessibility improvements, clicking the button will toggle the dropdown if it's open.
Footer– New horizontal/vertical layout options
Join– Improved structure compatibility
Modal– New positioning options (modal-start, modal-end, modal-top), accessibility improvements
Radio– New design, accessibility improvements
Radial Progress– accessibility improvements
Rating– accessibility improvements
Stack– New CSS grid layout, new directional options
Steps– Ability to add custom icon, accessibility improvements
Tab– New tabs-border style, new top/bottom positioning, accessibility improvements
Timeline– Accessibility improvements
Toggle– New custom icons support, accessibility improvements
Tooltip– New tooltip-content class

7. Component design improvements

TLDR – Several components received visual enhancements for improved aesthetics.
Skip to the next section

These components have been improved to be more visually appealing:

Chat bubble
Checkbox
Radio
Toggle
Range
Menu
File Input
Select
Input field
Label
Rating
Radial Progress
Mockups

daisyUI 4daisyUI 5

8. Component size scale improvements

TLDR – Size scale improvements for better consistency and flexibility.
Skip to the next section

These components now support the newxlsize modifier:

Button
Card
Kbd
Table
Menu
Tab
Loading
Checkbox
File Input
Radio
Range
Rating
Select
Input field
Textarea
Toggle

Size scale of these components has been improved to be more consistent:

Button
Badge
Kbd
Table
Menu
Tab
Loading

9. Detailed Changelog

TLDR - It's a long list of changes. Most of them won't affect you, so I've summarized the most important ones here and you can read the detailed changelog for each componentin the changelog page.
Skip to the next section

Summary of changes:

Visual style updates.
Size adjustments.
Accessibility improvements.
Bug fixes.
New features and more customization options.
Structure changes for a few parts of component.
Responsive design improved.
Print-friendly styles for many components.
Some classes were renamed, some unused ones were removed (Read next section for details).

Read the detailed changelog for each component

10. Breaking changes in class names

TLDR - Some class names were renamed, some unused ones were removed.
Skip to the next section

Addmd:footer-horizontaltofootercomponent to make it horizontal on medium screens.
Instead ofbtn-groupusejoin(btn-groupwas deprecated in 2023, now removed)
Instead ofinput-groupusejoin(input-groupwas deprecated in 2023, now removed)
Renamecard-compacttocard-sm
Renamedisabledclass ofmenuitems tomenu-disabled.
Renameactiveclass ofmenuitems tomenu-active.
Renamefocusclass ofmenuitems tomenu-focus.
Deleteform-controlclass. Use thenew fieldset componentinstead.
Instead of previouslabelsyntax, use thenew label syntax.
Renamebtm-navtodock.
Renamebtm-nav-labeltodock-label.
Renamebtm-nav-xstodock-xs.
Renamebtm-nav-smtodock-sm.
Renamebtm-nav-mdtodock-md.
Renamebtm-nav-lgtodock-lg.
Instead ofartboardclass, use Tailwind CSS width/height utilities.
Deleteartboard-demo,artboard-horizontal,phone-*classes. Use Tailwind CSS width and height utilities instead.
Renameonlineclass ofavatartoavatar-online.
Renameofflineclass ofavatartoavatar-offline.
Renameplaceholderclass ofavatartoavatar-placeholder.
Deletemask-parallelogram. No longer exists.
Deletemask-parallelogram-2. No longer exists.
Deletemask-parallelogram-3. No longer exists.
Deletemask-parallelogram-4. No longer exists.
Delete width/height of items inside thestack, use width/height for thestackitself.

Read the detailed changelog for each component

11. Breaking changes in design system

Default sizes for some UI elements have been adjusted for improved consistency. They are also customizable now.
Skip to the next section

btn,input,selectnow have a smaller height by defaultsee size scale improvements
checkbox,radio,toggle,range,ratingnow have a smaller height by defaultsee size scale improvements

You can customize the default size scale using the new--size-fieldand--size-selectorCSS variables in your theme.
Check out the newTheme Generatorpage to see it in action.

Read the detailed changelog for each component

12. Breaking changes in config

TLDR – Use the new config format in the CSS file. No need fortailwind.config.jsanymore.
The new config format is easier to use, it's more flexible, and it's more powerful.
Skip to the next section

Tailwind CSS 4 allows config directly from the CSS file, so instead oftailwind.config.jsyou need to put the daisyUI config in the CSS file.See the new config format.
themesconfig is a comma separated list of theme names. Read more aboutdaisyUI configanddaisyUI themes.
darkThemeconfig was removed. Instead you can use--prefersdarkflag directly in thethemeslist.
themeRootconfig was renamed toroot.
styled: falseconfig was removed in favor of providing micro CSS files and the ability to include/exclude parts of the library. Disabling themes will remove all colors, but component are no longer distributed into two chunk of unstyled styled. You can now include/exclude each component individually.
base: falseconfig was removed in favor of include/exclude config where you can include/exclude each component individually.
utils: falseconfig was removed in favor of include/exclude config where you can include/exclude each component individually.

13. Breaking changes in themes

TLDR – Automatic*-contentcolor calculation is removed. Theme variable names have changed for better consistency and readability. Previous themes are available for easy migration.
Skip to the next section

Automatic*-contentcolor calculation based on background color was removed. Now that Tailwind CSS supports CSS variables for colors, we no longer process and convert color values at build time. You can use any color format you want and neither daisyUI nor Tailwind CSS will convert it to another format at build time.

Most themes have been adjusted to look better and consistent. color contrast and accessibility got even better and the colors are more harmonious. These changes make the color more visually appealing and easier to read.
If you prefer using the previous colors, Iprepared a repo, including all daisyUI 4 theme colorseasy to copy/paste in daisyUI 5.

All color variable names have been changed to be aligned with new Tailwind CSS 4 syntax. And to be more readable and easier to customizeSee the new color format

Before	After
`--p`	`--color-primary`
`--pc`	`--color-primary-content`
`--s`	`--color-secondary`
`--sc`	`--color-secondary-content`
`--a`	`--color-accent`
`--ac`	`--color-accent-content`
`--n`	`--color-neutral`
`--nc`	`--color-neutral-content`
`--b1`	`--color-base-100`
`--b2`	`--color-base-200`
`--b3`	`--color-base-300`
`--bc`	`--color-base-content`
`--in`	`--color-info`
`--inc`	`--color-info-content`
`--su`	`--color-success`
`--suc`	`--color-success-content`
`--wa`	`--color-warning`
`--wac`	`--color-warning-content`
`--er`	`--color-error`
`--erc`	`--color-error-content`
`--rounded-box`	`--radius-box`
`--rounded-btn`and`--tab-radius`	`--radius-field`
`--rounded-badge`	`--radius-selector`
`--border-btn`and`--tab-border`	`--border`

Removed theme variables

--animation-btnwas removed (no longer needed)
--animation-inputwas removed (no longer needed)
--btn-focus-scalewas removed (no longer needed)

Theme custom fonts

Cyberpunk and Wireframe themes no longer have custom font by default. If you want the same v4 font for them, customize these themes like:

@plugin "daisyui";

@plugin "daisyui/theme" {
  name: cyberpunk;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
}

@plugin "daisyui/theme" {
  name: wireframe;
  font-family:
    Chalkboard,
    comic sans ms,
    "sans-serif";
}

14. Bug fixes

TLDR – More than 95% of all the open issues from daisyUI 4 have been fixed in this release.
Skip to the next section

Some of these bugs were fixed automatically by the new changes in changes in the core library, design system, themes, and components. Some of them became possible with the new capabilities of Tailwind CSS 4.

And some of these bugs were related to a specific structure / style / behavior of components and changing them in a patch release would have caused breaking changes for all existing projects. We had to wait for the major release to apply these changes.

If you've been waiting for a specific bug fix, here are the bugs that have been fixed in this release. Let me know if I miss any bug or let me know if a bug is closed by mistake 💚