daisyUI 4

🌼 Official website →

🌼 See all components →

🌼 How to use →

Community

Changelog

All notable changes to this project will be documented in this file. See commit-and-tag-version for commit guidelines.

4.12.23 (2024-12-26)

4.12.22 (2024-12-13)

4.12.21 (2024-12-12)

4.12.20 (2024-12-09)

4.12.19 (2024-12-09)

4.12.18 (2024-12-09)

4.12.16 (2024-12-09)

Bug Fixes

• #3268 unstyled collapse input size (#3293) (824092e)

4.12.15 (2024-12-09)

Bug Fixes

• Safari loading animation bug. closes #2570 (7e5f5a0)

4.12.14 (2024-10-28)

Bug Fixes

• nested drawer-end (1c39933), closes #3249

4.12.13 (2024-10-09)

Bug Fixes

• kbd default text color. closes: #3228 (9ca1318)

4.12.12 (2024-10-04)

Bug Fixes

• selector performance for RTL stat (ad6f291)

4.12.11 (2024-10-02)

Bug Fixes

• join button responsive margin issue. closes #3118 (50520b4)

4.12.10 (2024-06-26)

Bug Fixes

• join spacing adapting to button border width (da94f2c), closes #3028

4.12.9 (2024-06-26)

Bug Fixes

• missing type for themeRoot config (fade326), closes #3094

4.12.8 (2024-06-24)

Bug Fixes

• decrease default scrollbar color contrast using color-mix (92d98ed)

4.12.7 (2024-06-23)

Bug Fixes

• RTL <select> padding (08bc2e6), closes #3098

4.12.6 (2024-06-23)

4.12.5 (2024-06-23)

Bug Fixes

• theming function (4c83a88)

4.12.4 (2024-06-23)

Bug Fixes

• incorrect theme type declaration (#3097) (fcb8f9d)

4.12.3 (2024-06-23)

4.12.2 (2024-06-05)

4.12.1 (2024-06-05)

4.12.0 (2024-06-05)

Features

• scrollbars now have transparent background and currentColor foreground (f0ea341)

4.11.1 (2024-05-07)

Bug Fixes

• disable initial button animation for prefers-reduced-motion (57d470e)

4.11.0 (2024-05-07)

Features

• add tab-active style for tabs with aria-selected="true" attribute (213ee58)

4.10.5 (2024-05-03)

Bug Fixes

• add missing outline-* color utility classes to CDN file (b3e4800), closes #2944

4.10.4 (2024-05-02)

Bug Fixes

• show the parent element of disabled input as disabled (50d26b5), closes #3004

4.10.3 (2024-05-01)

4.10.2 (2024-04-16)

Bug Fixes

• consistent disabled form inputs (#2981) (50dfac4)

4.10.1 (2024-04-04)

Bug Fixes

• Add border above table footer (#2723) (7d54475), closes #2690 #2692

4.10.0 (2024-04-04)

Features

• modal now uses scrollbar-gutter (#2956) (f05e854)

4.9.0 (2024-03-26)

Features

• support OKLCH colors on Safari iOS 15 (56175e0), closes #2703

4.8.0 (2024-03-24)

Features

• checkbox/toggle with checked="true" won't force to show a checked value visually anymore (17585a6), closes #2911

4.7.3 (2024-03-09)

Features

• add carousel-start utility class

4.7.2 (2024-02-13)

Bug Fixes

• input element inside wrapper with input class background color. closes #2846 (938829d)

4.7.1 (2024-02-13)

Bug Fixes

• don't apply menu item styles to btn is inside menu (ac60762)

4.7.0 (2024-02-12)

Features

• use CSS scrollbar-gutter for drawer. close #2622, close #2483, close #2782, close #2142, closes #2004 (863afaf)

4.6.3 (2024-02-12)

Bug Fixes

• incompatibility of Astro Islands injected style and script tags. closes: #2835 (8b1cfed)

4.6.2 (2024-02-07)

Bug Fixes

• #2625 Fix input spin button position (#2777) (4fb0a30)

4.6.1 (2024-01-29)

Bug Fixes

• #2775 Fix opacity modifier for disabled selection (#2776) (65b13a8)

4.6.0 (2024-01-11)

Bug Fixes

• #2725 Change top position to prevent movements when collapse opens (#2730) (69b40ff)

4.5.0 (2024-01-02)

Features

• added some Chinese translations (#2707) (c122353)

Bug Fixes

• prose code fallback color for old browsers. closes: #2715 (0471a04)

4.4.24 (2023-12-24)

Bug Fixes

• unwanted background color in .prose pre>code (5d6daf3)

4.4.23 (2023-12-20)

Bug Fixes

• #2634 compile base colors (#2635) (ae4807b)

4.4.22 (2023-12-20)

Bug Fixes

• #2682 (49c6389)

4.4.21 (2023-12-20)

Bug Fixes

• #2664 (ff7c106)
• update ja component names (#2666) (5324c7c)

4.4.20 (2023-12-14)

Bug Fixes

• #2651 Allow override input size attributes (fa54f68)

4.4.19 (2023-12-04)

Bug Fixes

• input type=date text-align issue in iOS (acf5377)

4.4.18 (2023-12-03)

4.4.17 (2023-11-30)

Bug Fixes

• drawer-content overflow when there's a table. closes: #2262 closes: #1914 (206b207)

4.4.16 (2023-11-30)

Bug Fixes

• drawer and modal backdrop color (0f994e3)

4.4.15 (2023-11-30)

Bug Fixes

• drawer scrollbars are now visible. closes: #2598 closes: #2276 (b2ec8f7)

4.4.14 (2023-11-28)

Bug Fixes

• drawer-content overflow when there's a table. closes: #2262 #1914 (1c7e786)

4.4.12 (2023-11-28)

Bug Fixes

• group-hover:tooltip-open. closes: #2533 (a8742dc)

4.4.11 (2023-11-28)

Bug Fixes

• prose code before/after:content. closes: #2589 (e6055ee)

4.4.10 (2023-11-27)

Bug Fixes

• hardcoded checkbox background. Closes: #2585 (b2b87d2)

4.4.9 (2023-11-26)

Bug Fixes

• missing responsive dropdown modifiers. closes #2490 (ac3266a)

4.4.8 (2023-11-26)

Bug Fixes

• Fix: button-active color fallback for old browser
• Fix: link hover color fallback for old browser
• Fix: menu line color fallback for old browser

4.4.7 (2023-11-25)

Bug Fixes

• #2573 tab styles (#2574) (2ddbc48)

4.4.6 (2023-11-23)

Bug Fixes

• radio tab visual issue on iOS safari. Closes #2568 (e38abad)

4.4.5 (2023-11-23)

Bug Fixes

• missing menu hover bg color (87c5ad7)

4.4.4 (2023-11-23)

Bug Fixes

• #2559 (ccb496d)

4.4.3 (2023-11-23)

Bug Fixes

• #2556 (b87e5bc)

4.4.2 (2023-11-18)

Bug Fixes

• improve default success color contrast vs base color (ef9f542)

4.4.1 (2023-11-18)

Bug Fixes

• improve neutral color in dim theme (953534c)

4.4.0 (2023-11-17)

Features

• invalid color value in config now shows an error (41ee386)

4.3.0 (2023-11-16)

• fix Commonjs require issues

Bug Fixes

• #2543 (6a9b9ac)

4.0.9 (2023-11-16)

Bug Fixes

• divider default color not being visible on dark themes (fffd021)

4.0.8 (2023-11-16)

Bug Fixes

• footer text opacity (f4be765)

4.0.6 (2023-11-14)

Bug Fixes

• #2504 (f90bc9b)

4.0.5 (2023-11-14)

Bug Fixes

• #2523 (41f35fe)

4.0.4 (2023-11-14)

Bug Fixes

• #2505 missing border on select component (#2514) (71981e9)

4.0.3 (2023-11-13)

Bug Fixes

• specificity issue on form inputs

4.0.2 (2023-11-13)

Bug Fixes

• #2499 (45ea773)

4.0.0 (2023-11-12)

Breaking changes

• 🌈 OKLCH colors
  • daisyUI 4 uses wide-gamut OKLCH colors internally instead of HSL now.
  • The new OKLCH color model unlock access to 30% more colors comparing to RGB/HSL.
  • All internal color variables (--p, --s, etc) now contain OKLCH values instead of HSL.
  • If you're using those CSS variables directly inside your project like hsl(var(--p)) you have to change it to oklch(var(--p))
  • OKLCH colors are supported in Chrome/Edge 111+, Safari 15.4+, Firefox 113+
  • For old browsers, daisyUI provides HEX fallback colors only for the default dark/light themes.
  • Read more about OKLCH colors here.
• 🌈 Color names
  • Removed all *-focus color names. They where being used only for buttons.
  • Darker colors are now generated using CSS color-mix() under the hood.
  • The following class names are removed now:
    • primary-focus
    • secondary-focus
    • accent-focus
    • neutral-focus
  • You can also make a color darker or lighter using CSS color-mix(). For example to make primary (--p) color darker by 7%, you can use this class name:
    bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]
• 🎨 Themes
  • there's a change in property names in daisyui/src/theming/themes.js file.
    If you're customizing a built-in daisyUI theme like this:

     ...require("daisyui/src/theming/themes")["[data-theme=light]"],

    change it to:

    ...require("daisyui/src/theming/themes")["light"],

  • All theme colors adjusted for better contrast, better color harmony and better accessibility.
• 🧠 Logical CSS properties
  • daisyUI 4 components use logical CSS properties instead of directional rules (mr-*, pl-*, etc)
  • If you are using directional CSS rules (right/left) to modify daisyUI styles, it still works fine in LTR mode but you may want to double check.
• ⬅️ RTL
  • Removed rtl daisyUI config
  • All components now support LTR/RTL without any config or plugin.
  • You don't need tailwindcss-flip plugin anymore.
  • You don't need to set rtl: true in tailwind.config.js
  • Just add dir=rtl to <html> tag and everything will be RTL on runtime.
• 🗂️ Tab
  • No need to repeat modifier classes for each tab item.
  • these modifier classes for tab are removed:
    • tab-lifted
    • tab-bordered
    • tab-lg
    • tab-md
    • tab-sm
    • tab-xs
  • Use the following modifier classes for the parent tabs class instead:
    • tabs-lifted
    • tabs-bordered
    • tabs-lg
    • tabs-md
    • tabs-sm
    • tabs-xs
  • tabs class is now using grid, instead of flex.
  • Lifted tab now uses a single pseudo element (:before) instead of two (:before and after)
• ⏺️ Button
  • buttons are not uppercase by default anymore
  • Removed --btn-text-case CSS variable from themes
• ⚙️ Config
  • Removed rtl config because RTL is now automatic
• 📦 Dependencies
  • Removed colord, rtlcss, postcss, tailwindcss
  • Added culori, picocolors

Features

• 💡 Efficiency
  • 92% less NPM module dependencies
  • 73% smaller install size and node_modules footprint
• ✨ New components:
  • timeline
  • skeleton
  • diff
  • theme-controller
• ➗ New divider color modifier class names
  • divider-primary
  • divider-secondary
  • divider-accent
  • divider-neutral
  • divider-success
  • divider-warning
  • divider-info
  • divider-error
• ➗ New divider position modifier class names
  • divider-start
  • divider-end
• 🎨 New themes:
  • Dim
  • Nord
  • Sunset
• ⏺️ Buttons
  • Added hover color for the following other buttons:
    • btn-info
    • btn-success
    • btn-warning
    • btn-error
• 🗂️ Tab
  • Empty tab tag now grows and fills the empty space
  • tab class can now be a radio input. aria-label value will be shown as the tab title so it's accessible for screen readers and keyboard navigation.
  • New tab-content class allows you to switch tab content
• 🧩 @tailwindcss/forms
  • Fix compatibility with @tailwindcss/forms plugin (even though you don't need it alongside daisyUI)
• ⚙️ Config
  • New themeRoot config
    • Now you can define target another element instead of :root to receive the color CSS variables.
    • This is useful for using colors in shadow root.

Bug Fixes

• Text color for disabled input #1622
• Fix tab radius
• Fix missing utility classes
• Docs: Prefix not work on responsive classes #2445
• Hover animations for state buttons #1790
• Skeleton component #186
• Uppercase buttons #2187

Docs

• New translations for docs
  • Arabic
  • Farsi
• daisyUI official store – Get professional templates made by daisyUI
• daisyUI resources – A handpicked collection of community videos, articles and courses about daisyUI
• Add roadmap page
• Add docs for utility classes
• Update theme generator
• Show browser support for components that are using new CSS rules

3.9.4 (2023-10-27)

Bug Fixes

• docs: Remove bottom padding from dropdown example (#2437) (09d91c7)

3.9.3 (2023-10-17)

Bug Fixes

• docs: fr.json (#2416) (433e2e5)
• missing neutral-950 color (59eb57b)

3.9.2 (2023-10-05)

Features

• improve logs (379137c)

3.9.0 (2023-10-05)

Features

• increase Tailwind CSS dependency from ^3 to ^3.1 (35e577f)

3.8.3 (2023-10-02)

Bug Fixes

• #2116 progress bar firefox bug (#2376) (53889de)

3.8.1 (2023-09-27)

Features

• add :focus-within style to .input (#2363) (cac7938)
• disable input outline when there's an <input> tag inside a .input wrapper (dc1766b)

Bug Fixes

• #2360 (20a8f62)

3.8.0 (2023-09-26)

Features

• tooltip color variants now can be extended using apply (11fb1b1), closes #2371

3.7.7 (2023-09-21)

3.7.6 (2023-09-19)

Bug Fixes

• #2333 multidirection support for join (#2334) (e8b3589)

3.7.3 (2023-09-06)

Bug Fixes

• chat bubble arrow gap in iOS (dbe5f83), closes #2199

3.7.2 (2023-09-06)

Bug Fixes

• dropdown button border radius inside join (7e36bb0), closes #2115

3.7.0 (2023-09-06)

Features

• drawer-open now works in RTL mode. (5162ff3), closes #1951 #1974 #2034 #2060 #2094 #2229

3.6.5 (2023-09-04)

Bug Fixes

• #2311 <select> font weight is not semibold anymore because it causes a bug in Safari (c773cdf)

3.6.4 (2023-08-30)

Bug Fixes

• #2305 (ed3000c)

3.6.3 (2023-08-25)

Bug Fixes

• #2257 (7b63fca)

3.6.2 (2023-08-25)

Bug Fixes

• #2274 (260214b)

3.5.1 (2023-08-03)

Bug Fixes

• #2138 (6fdebb3)

3.5.0 (2023-07-25)

Features

• improve animation and transition speed for checkbox, collapse, drawer, dropdown, loading, menu, modal, radio, rating, swap, toggle, badge, file-input (561e4e6)

Bug Fixes

• typo (#2174) (9b8dc66)

3.4.0 (2023-07-24)

Features

• menu item text now breaks by default if the text is long. fix #2148, #1924 (8c53efe)

3.3.2 (2023-07-24)

Bug Fixes

• #2125 (df24a09)
• #2165 (dfd1c9b)

3.3.1 (2023-07-20)

Bug Fixes

• rename toolbar class of browser mockup to mockup-browser-toolbar to avoid future conflicts (23f9e17)

3.3.0 (2023-07-20)

Features

• add the browser mockup component from README.md list (#2147) (b58282e)

3.2.2 (2023-07-20)

Bug Fixes

• #2143 (a9946b2)

3.2.1 (2023-07-07)

Bug Fixes

• cleanup dependencies (57d79d3)

3.2.0 (2023-07-07)

Features

• less node dependencies (f5859f7)

3.1.11 (2023-07-07)

Bug Fixes

• #2048 (4c6aa7b)

3.1.10 (2023-07-06)

Bug Fixes

• #2055 (2443a12)

3.1.9 (2023-07-05)

Bug Fixes

• #1955 (eae2e29)

3.1.8 (2023-07-05)

Bug Fixes

• #2039 (d984d5b)
• #2082 (8a3b82f)

3.1.6 (2023-06-23)

Bug Fixes

• #2041 (bbca416)
• #2043 (b6081c3)

3.1.5 (2023-06-20)

Bug Fixes

• #1888 drawer now animates out (#1988) (b5b55c5)

3.1.3 (2023-06-20)

Bug Fixes

• #2000 (92cb491)

3.1.2 (2023-06-20)

Bug Fixes

• #2023 (0c4524b)
• #2031, #2027, #2024, #2021, #2008, #1907 (fd4f500)
• typo (#2025) (d878f59)

3.1.1 (2023-06-16)

Bug Fixes

• #1980 (a2434d4)
• #1985 (1ceff0c)
• #1995 invalid "for" property in examples (#1996) (e8031e6)
• #2001 (e7a6e6c)

3.1.0 (2023-06-11)

Features

• input-bordered, select-bordered, textarea-bordered are now using base-200 for border coloe instead of base-content/20 (0f5df66)

Bug Fixes

• #1919 (a0dc6cb)
• #1957 (10f5976)