🌼 daisyUI 5 beta release notes

daisyUI 5 beta release notes

Everything about the new daisyUI 5 release

daisyui 5
Table of Contents
  1. Install
  2. Core Improvement
  3. Build and integration improvements
  4. Design System Improvements
  5. Themes and styling
  6. New components
  7. Major component improvements
  8. Component design improvements
  9. Component size scale improvements
  10. Detailed Changelog
  11. Breaking changes in class names
  12. Breaking changes in design system
  13. Breaking changes in config
  14. Breaking changes in themes
  15. Bug fixes
  16. What to expect in the final release

Also check out the changelog page for a detailed list changes in each component.

Install

🧪 This is a public beta release. There may be a few bugs. The stable version will be available later.

  1. First Install Tailwind CSS 4 beta
    If you’re upgrading from Tailwind CSS 3 to Tailwind CSS 4, remove daisyUI from tailwind.config.js before running the upgrade command.

  2. Install daisyUI 5 beta

    Terminal
    npm i -D daisyui@beta

  3. Add daisyUI to your CSS file

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

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

See Tailwind CSS upgrade guide for 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
daisyui-package

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

daisyui 5 cdn size

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 CSS color-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.0.0-beta.1/components/toggle.css

All components, all themes, and basically every single part of daisyUI library is 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 the CDN docs to 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 + new xl size modifier.
New component style modifiers: *-soft and *-dash.
Color format flexibility.
Skip to the next section

daisyui 5 noise effect and depth effect

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 new Theme Generator page to see how it works.

New “X-Large” size

All components that previously had xs, sm, md, and lg size modifiers now also support a new xl size modifier. This gives you more control over the size of components and allows you to create more flexible and responsive designs.

daisyui tailwind xl button

Size scale improvements

With the addition of the new xl size 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 scaleBeforeAfter
xs6 × 4 = 24px6 × 4 = 24px
sm8 × 4 = 32px8 × 4 = 32px
md12 × 4 = 48px10 × 4 = 40px
lg16 × 4 = 64px12 × 4 = 48px
xl-14 × 4 = 56px
Checkbox height scaleBeforeAfter
xs4 × 4 = 16px4 × 4 = 16px
sm5 × 4 = 20px5 × 4 = 20px
md6 × 4 = 24px6 × 4 = 24px
lg8 × 4 = 32px7 × 4 = 28px
xl-8 × 4 = 32px
Numbers not Numbering

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-field variable is used to define the base size of fields like input, button, tab, etc.
  • --size-selector variable is used to define the base size of selectors like checkbox, radio, toggle, badge, etc.

See how it works in the new Theme Generator page.

Border size customization

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

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

See how it works in the new Theme Generator page.

daisyui 5 soft button and dash button

New component styles: soft, dash

Components like button, badge, alert now have soft and dash styles.
soft style makes the component look softer and dash style 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 like md:, 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 and color-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

daisyui 5 new tailwind css themes

New themes

daisyUI 5 includes 3 new themes:

  • cappuccino – 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.

tailwind css color generator

All-new Theme Generator

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

tailwind css daisyui theme generator

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.

See List component docs

daisyui tailwind list

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, and xl.

See Status component docs

daisyui tailwind status

Fieldset

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

See Fieldset component docs

daisyui tailwind fieldset

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.

See Label component docs

daisyui tailwind label

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.

See Filter component docs

daisyui tailwind filter

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

See Calendar component docs

daisyui tailwind calendar

Validator

Validator class changes the color of form elements to error or success based on input’s validation rules. It can also show a hint text below the input if it’s invalid.

See Validator component docs

daisyui tailwind validator

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, and xl.

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

See Dock component docs

daisyui tailwind dock

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:

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 new xl size modifier:

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

daisyui changelog

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

  • Add md:footer-horizontal to footer component to make it horizontal on medium screens.
  • Instead of btn-group use join (btn-group was deprecated in 2023, now removed)
  • Instead of input-group use join (input-group was deprecated in 2023, now removed)
  • Rename card-compact to card-sm
  • Rename disabled class of menu items to menu-disabled.
  • Rename active class of menu items to menu-active.
  • Rename focus class of menu items to menu-focus.
  • Delete form-control class. Use the new fieldset component instead.
  • Instead of previous label syntax, use the new label syntax.
  • Rename btm-nav to dock.
  • Rename btm-nav-label to dock-label.
  • Rename btm-nav-xs to dock-xs.
  • Rename btm-nav-sm to dock-sm.
  • Rename btm-nav-md to dock-md.
  • Rename btm-nav-lg to dock-lg.
  • Instead of artboard class, use Tailwind CSS width/height utilities.
  • Delete artboard-demo, artboard-horizontal, phone-* classes. Use Tailwind CSS width and height utilities instead.
  • Rename online class of avatar to avatar-online.
  • Rename offline class of avatar to avatar-offline.
  • Rename placeholder class of avatar to avatar-placeholder.
  • Delete mask-parallelogram. No longer exists.
  • Delete mask-parallelogram-2. No longer exists.
  • Delete mask-parallelogram-3. No longer exists.
  • Delete mask-parallelogram-4. No longer exists.
  • Delete width/height of items inside the stack, use width/height for the stack itself.

Read the detailed changelog for each component

tailwind css daisyui xl button

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

You can customize the default size scale using the new --size-field and --size-selector CSS variables in your theme.
Check out the new Theme Generator page 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 for tailwind.config.js anymore.
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 of tailwind.config.js you need to put the daisyUI config in the CSS file. See the new config format.
  • themes config is a comma separated list of theme names. Read more about daisyUI config and daisyUI themes.
  • darkTheme config was removed. Instead you can use --prefersdark flag directly in the themes list.
  • themeRoot config was renamed to root.
  • styled: false config 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: false config was removed in favor of include/exclude config where you can include/exclude each component individually.
  • utils: false config was removed in favor of include/exclude config where you can include/exclude each component individually.

Read more about daisyUI config.

13. Breaking changes in themes

TLDR – Automatic *-content color 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 *-content color 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, I prepared a repo, including all daisyUI 4 theme colors easy 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 customize See the new color format

BeforeAfter
--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-btn was removed (no longer needed)
  • --animation-input was removed (no longer needed)
  • --btn-focus-scale was 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 💚

tailwind css

Please report any new bugs you find to GitHub issues 🙏

15. What to expect in the final release

TLDR – No additional major changes are planned until the final release. Only bug fixes.
⤴️ Go back to the top

daisyUI 5.0.0 stable version will be release after the beta period. No major changes are planned before the final release. The focus will be on fixing bugs and improving documentation.

I would suggest you to start using the beta version in your projects locally (not production) and report any bugs you find on the GitHub issues page so we can fix them before the final version.

If you tested the Beta version locally and you are 100% sure everything is working looks good visually, you can use it in production as well but beware that there might be some small bugs that we are not aware of.

Join us at daisyUI Discord server to get the news and updates about the final release or talk about daisyUI with other developers.

Also check out the changelog page for a detailed list changes in each component.

daisyui-5-beta-production
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser