Changelog

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

5.3.9 (2025-10-24)

Bug Fixes

allow browser to find text in collapse <details> (bde0427), closes #4194

5.3.8 (2025-10-22)

Bug Fixes

easier overriding before/after content using utility classes. closes: #4196 (f2b1e9f)

5.3.7 (2025-10-16)

Bug Fixes

btn in prose shouldn't have underline by default. closes: #4192 (1205a90)

5.3.6 (2025-10-16)

Bug Fixes

backdrop color bleeding issue + scrollbar improvements. closes: #3928 (240d1d8)

5.3.5 (2025-10-16)

Bug Fixes

btn-disabled color. closes: #4191 (bf956c8)

5.3.4 (2025-10-16)

Bug Fixes

validator-hint overrides hidden class as expected. close: #4188 (c05604d)

5.3.3 (2025-10-15)

Bug Fixes

do not show the line before for first step in horizontal orientation (#4187) (3cce2c8)

5.3.2 (2025-10-15)

Bug Fixes

adjust layers - drawer and collapse (#4183) (6cb4500)

5.3.1 (2025-10-14)

Bug Fixes

allow overflow auto for select multiple. Closes: #4178 (b4917f7)

5.3.0 (2025-10-13)

Features

Add new layers to improve CSS specificity (5044a3f), closes #3589 #3622

Bug Fixes

fix: card modifier classes can be used with Tailwind variants now, closes: #3589
fix: btn-disabled can be used with Tailwind variants now, closes: #3622

5.2.5 (2025-10-13)

Bug Fixes

fix version mismatch (3198cda)

5.2.4 (2025-10-13)

5.2.3 (2025-10-11)

Bug Fixes

fix: style for nested validator with aria-invalid attribute. closes: #4176

5.2.2 (2025-10-11)

Bug Fixes

countdown RTL bug and allow defining number of digits (426de84)

5.2.1 (2025-10-11)

Bug Fixes

countdown alignment problems (#4166) (83198ca), closes #3872

5.2.0 (2025-10-10)

Features

new variants for drawer: is-drawer-open and is-drawer-close to style elements based on drawer state. Allowing us to create icon-only drawer sidebar.
countdown now supports 0 to 999 with dynamic width (6b63563)
countdown: animate independently the 2 digits of the number (d3a32e2), closes #4143
detect if page has vertical scrollbar visible and set scrollbar-gutter (abf02cc)
icon-only drawer sidebar, new variants is-drawer-open and is-drawer-close (32e919e)

Bug Fixes

dropdown: do not open dropdown on click (but open it on kbd focus) (39e4cb5), closes #3880
enable tailwind conditional classes on menu-active (4a8d227)
Tailwind CSS collapse utility class conflict (c39d839)
fix scrollbar gutter layout shift on Windows when modal or drawer has a different scrollbar visibility than the body

5.1.32 (2025-10-10)

5.1.31 (2025-10-10)

Bug Fixes

modal: make sure elements inside modal are hidden when not open (#4161) (5ddae21), closes #3440 #3835 #2223

5.1.30 (2025-10-09)

Bug Fixes

focus the first focusable element when modal opens. closes: #3440 (c1e2f0c)

5.1.29 (2025-10-07)

Bug Fixes

(iOS) increase font size of small text input and textarea on focus so page wont zoom in (3b35fbb), closes #3871 #1145

5.1.28 (2025-10-07)

Bug Fixes

fab 7th child visibility issue. closes: #4157 (78128dc)

5.1.27 (2025-10-03)

Bug Fixes

prevent select line break on long text when select is not open and prevent page overflow when select is open. closes: #4105 (6782522)

5.1.26 (2025-09-30)

Bug Fixes

navbar default position (f75a5ed)

5.1.25 (2025-09-28)

Bug Fixes

tabs-box radius. closes: #3904 (d359621)

5.1.24 (2025-09-26)

Bug Fixes

cally selected day hover color. closes: #4085 (f115ca9)

5.1.23 (2025-09-25)

Bug Fixes

<details> collapse animation. closes: #4128 (f2a453a)

5.1.22 (2025-09-25)

Bug Fixes

unwanted box shadow of kbd inside prose (233c58a)

5.1.21 (2025-09-25)

Bug Fixes

fix: collapse focus-within issue. closes: #4128
fix: text truncate issue. closes: #2965

5.1.20 (2025-09-25)

Bug Fixes

allow height customization for select with multiple attribute (8292854)

5.1.19 (2025-09-25)

Bug Fixes

Update dependencies

5.1.18 (2025-09-24)

Bug Fixes

Select multiple dropdown arrow closes: #4109 (946db4c)

5.1.17 (2025-09-24)

Bug Fixes

fix: .prose class not working with daisyUI prefix. closes: #4119

5.1.16 (2025-09-24)

Bug Fixes

Collapse gets closed when interactive input inside is focused. closes: #4128 (f55cf0e)

5.1.15 (2025-09-24)

Bug Fixes

Collapse arrow position. closes: #4133 (02eba47)

5.1.14 (2025-09-22)

Bug Fixes

chat bubble tail size. closes: #4130 (d3de565)

5.1.13 (2025-09-17)

5.1.12 (2025-09-14)

Bug Fixes

nested select margin (closes: #4114) (af7ffbd)

5.1.11 (2025-09-14)

Bug Fixes

--fx-noise SVG scale on Firefox. closes: #3583 (84df795)

5.1.10 (2025-09-10)

Bug Fixes

diff focus and resizer position on Safari. closes: #4104 (712d0ff)

5.1.9 (2025-09-09)

Bug Fixes

select horizontal padding. closes: #3890 (449378e)

5.1.8 (2025-09-07)

5.1.7 (2025-09-04)

Bug Fixes

base-select style in CDN file. closes: #4095 (40f59aa)

5.1.6 (2025-09-02)

Bug Fixes

nested select height. closes: #4087 (4498a5f)

5.1.5 (2025-09-02)

Bug Fixes

checkbox background color (fd938ab)

5.1.4 (2025-09-02)

Bug Fixes

improve base-select optgroup style. closes: #4083 (059f64e)

5.1.3 (2025-09-01)

Bug Fixes

<label class="select"> base-select style and misalignment. closes: #4082 (d1556fa)

5.1.2 (2025-09-01)

Bug Fixes

tooltip animation (38049bc)

5.1.1 (2025-09-01)

Bug Fixes

<select> double arrow on Firefox (748fd54)

5.1.0 (2025-09-01)

Features

feat: New component - Hover Gallery
feat: New component - FAB / Speed Dial
feat: Styled native HTML <select> element (works in Chromium, other browsers use the old OS style)
feat: Support prefers-reduced-motion for all animations

Bug Fixes

fix: theme-controller prefix
fix: support aria-current for tab
fix: add scrollbar-gutter auto to prevent modal scrollbar shift
fix: increase drawer z-index to prevent overlap issues

5.0.55 (2025-09-01)

5.0.54 (2025-08-28)

Bug Fixes

prefersdark theme overriding the default theme in custom themes. closes: #3921 (bd6b064)

5.0.53 (2025-08-28)

Bug Fixes

improve text contrast for selected cally dates on hover (#4056) (904505f), closes #4042

5.0.52 (2025-08-27)

Bug Fixes

date input alignment in labels on iOS Safari (#3995) (ee1bd67), closes #3952

5.0.51 (2025-08-26)

Bug Fixes

styles for disabled inputs and select in fieldset (c60350d), closes #4021

5.0.50 (2025-07-29)

Bug Fixes

use semantic fallbacks for checkbox states, improve indeterminate visibility. closes: #3979 (d19f38a)

5.0.49 (2025-07-28)

Bug Fixes

react-day-picker disableNavigation not styling properly. closes: #3990 (29123bc)

5.0.48 (2025-07-27)

Bug Fixes

apply theme-aware hover styling to Cally day buttons. closes: #3991 (9960287)

5.0.47 (2025-07-25)

Bug Fixes

browser search icon color in dark theme. closes: #4006 (922256d)

5.0.46 (2025-07-06)

5.0.45 (2025-07-06)

5.0.44 (2025-07-06)

Bug Fixes

responsive RTL dropdown position. closes: #3956 (03cf030)

5.0.43 (2025-05-30)

Bug Fixes

badge-outline, badge-dash, badge-soft can be used with tailwind responsive variants. closes: #3643 (2470fe2)

5.0.42 (2025-05-29)

Bug Fixes

checkbox in menu should not be grid. closes: #3922 (7f1ca83)

5.0.41 (2025-05-29)

5.0.40 (2025-05-28)

Bug Fixes

Chat bubble mask not working with tailwind prefixes. closes: #3847 (c7856f2)

5.0.39 (2025-05-28)

Bug Fixes

calendar - react daypicker range bg color. closes: #3918 (d9df966)

5.0.38 (2025-05-26)

Bug Fixes

correct CSS syntax error in variables.css (#3910) (cd4820f)

5.0.37 (2025-05-22)

Bug Fixes

tab-content height. closes: #3843 (0b5d958)

5.0.36 (2025-05-22)

Bug Fixes

Safari iOS page zoom when user focuses Text Input. closes: #3871 (1b5b997)
bug: The collapse input/title has a fixed min-height applied with high specificity #3885
bug: Button Link and Ghost hover states persisting on mobile devices #3888
bug: URL and email inputs with icons don't maintain LTR in RTL mode #3886
bug: disabled button should not change border size #3877
bug: indicator direction not reflecting on RTL #3851
bug: validator on aria-invalid="false" should not be considered as invalid #3855

5.0.35 (2025-05-01)

Bug Fixes

allow tooltip font size customization. closes: #3830 (c1b9d69)

5.0.34 (2025-05-01)

Bug Fixes

validator-hint respecting user-valid: variant. closes: #3668, #3669 (8ffbebb)

5.0.33 (2025-04-30)

Bug Fixes

swap indeterminate not being visible with flip animation. closes: #3806 (42a2fb5)

5.0.32 (2025-04-30)

Bug Fixes

prevent double-tap zoom on buttons on mobile (02a401a)

5.0.31 (2025-04-30)

Bug Fixes

button hover state persisting on mobile screen. closes: #3817 (75c92c9)

5.0.30 (2025-04-30)

Bug Fixes

tooltip showing when data-tip or tooltip-content is empty. closes: #3819 (2414ca5)

5.0.29 (2025-04-29)

Bug Fixes

table-zebra active row color. closes: #3823 (cad94c2)

5.0.28 (2025-04-23)

5.0.27 (2025-04-18)

Bug Fixes

toggle padding value inconsistencies. closes: #3746 (59e1575)

5.0.26 (2025-04-18)

Bug Fixes

drawer z-index issue. closes #3797 (00c20c3)

5.0.25 (2025-04-17)

Bug Fixes

kbd border width (eaa78a8)

5.0.24 (2025-04-17)

Bug Fixes

join outline issues. closes: #3722 (78bf76d)

5.0.23 (2025-04-16)

Bug Fixes

add isolate to drawer-content to avoid z-index overflow. closes: #3790 (488804f)

5.0.22 (2025-04-16)

Bug Fixes

add isolate to collapse. closes: #3713 (24b4742)
fix: outline in join element. closes: #3722
fix: toast position. closes: #3738, closes: #3702

5.0.21 (2025-04-16)

Bug Fixes

fix: badge-outline border color. closes: #3784
fix: dock-active accepts variants. closes: #3170

5.0.20 (2025-04-15)

Bug Fixes

modal-start scroll gutter. closes: #3787 (52414ef)

5.0.19 (2025-04-11)

Bug Fixes

diff not working on iOS, fix docs. closes: #3715 (cc9da38)

5.0.18 (2025-04-10)

Bug Fixes

validator working with aria-invalid (f4688a3)

5.0.17 (2025-04-08)

Bug Fixes

Bundle file for version. (7fd2640), closes #3765

5.0.16 (2025-04-07)

Bug Fixes

fix: collapse-content transition duplicate, transition typo (#3761)
fix tabs-box render issue on Nuxt. closes: #3724

5.0.15 (2025-04-07)

Bug Fixes

dropdown-center RTL, modal gutter, collapse-content animation

5.0.14 (2025-04-07)

Bug Fixes

workaround for lightningcss issue of color mix in &:before. closes: #3758, closes: #3755

5.0.13 (2025-04-06)

Bug Fixes

checkbox style inside tab-content. closes: #3753 (fe16212)

5.0.12 (2025-04-02)

Bug Fixes

icon position of date input inside input wrapper on chromium-based (#3725) closes: #3708 (b1560a6)

5.0.11 (2025-04-02)

Bug Fixes

card image-full radius color bleed. closes: #3734 (d6fb204)

5.0.10 (2025-04-02)

Bug Fixes

:not(:has()) selectors getting prefix. closes: #3739 (771b6eb)

5.0.9 (2025-03-21)

Bug Fixes

Join style on iOS. closes: #3691 (5afa08c)

5.0.8 (2025-03-21)

Bug Fixes

alert unwanted gap if there's one child only. closes: #3702 (6d3eb06)

5.0.7 (2025-03-21)

5.0.6 (2025-03-17)

Bug Fixes

badge color (56390f5)

5.0.5 (2025-03-17)

Bug Fixes

fix: Floating labels font sizes. closes: #3676
fix: . select > select caret. closes: #3613
fix: theme generator untrimmed color issue. closes: #3636
fix: btn-active working with Tailwind variant prefixes. closes: #3652
fix: badge-outline border-* override. closes: #3657
fix: Swap Indeterminate rotate style. closes: #3678
fix: hero-content isolation issue. closes: #3682
fix: checked button style for outline and dash. closes: #3591
fix: fieldset-label cursor

5.0.4 (2025-03-14)

fix: prevent duplicate theme to be added if there's only one default theme - improves CSS size for single theme sites.
fix: select in <label> double caret. closes: #3613
fix: dialog does not put focus on first focusable element. closes: #3440

5.0.3 (2025-03-12)

Bug Fixes

fix: CDN color opacity utilities
fix: dropdown-end position
fix: diff outline
fix: diff-resizer size and placement
fix: checked button style

5.0.2 (2025-03-11)

Bug Fixes

tailwindplay issue (24cd382)

5.0.1 (2025-03-11)

Bug Fixes

bug: (v5) I can't override inline the font-size of a button without using important. closes: #3641
bug: text content in the alert component isn't responsive. closes: #3638
bug: code in prose (typography plugin) is not styled by daisy. closes: #3631
bug: Modal looses backdrop transition after build. closes: #3628
bug: (v5) unintended outline when using join and radio button. closes: #3615
bug: fieldset + select + icon. closes: #3613
bug: (v5) Text opacity and custom fonts not working in daisyUI v5 CDN version. closes: #3612
bug: "join" applies incorrect border radius when used with a single item. closes: #3611
bug: (v5) Button colors do not play well with typography. closes: #3606
bug: (v5) Collapse uses variable --rounded-box but it should use --radius-box. closes: #3600
bug: Deno requires with attribute on import. closes: #3597
bug: The development guides does not work on Windows machine. closes: #3567
docs: Badge component code highlight error. closes: #3627
docs: Add warning about Modal placement inside Dropdown components. closes: #3616

5.0.0

This is the detailed list of changes per component. Most of these changes won't affect your project, so if you want to learn about the breaking changes only, check out the daisyUI 5 release notes

Alert

🆕 Additions

Added alert-outline, alert-dash, and alert-soft variants.
Added alert-vertical and alert-horizontal layout options.

🔧 Changes

Instead of hardcoded responsive breakpoints, you can now use the max-sm:alert-horizontal or any other responsive breakpoint.

Artboard

🗑️ Removals

Breaking Change: Removed all artboard and phone-* classes. These classes were simply setting the width and height of the div. Use Tailwind CSS w-* and h-* classes instead.

Before	After
`artboard phone-1`	`w-[320px] h-[568px]`
`artboard phone-2`	`w-[375px] h-[667px]`
`artboard phone-3`	`w-[414px] h-[736px]`
`artboard phone-4`	`w-[375px] h-[812px]`
`artboard phone-5`	`w-[414px] h-[896px]`
`artboard phone-6`	`w-[320px] h-[1024px]`

Before	After
`artboard artboard-horizontal phone-1`	`w-[568px] h-[320px]`
`artboard artboard-horizontal phone-2`	`w-[667px] h-[375px]`
`artboard artboard-horizontal phone-3`	`w-[736px] h-[414px]`
`artboard artboard-horizontal phone-4`	`w-[812px] h-[375px]`
`artboard artboard-horizontal phone-5`	`w-[896px] h-[414px]`
`artboard artboard-horizontal phone-6`	`w-[1024px] h-[320px]`

- <div class="artboard phone-1">
+ <div class="w-[320px] h-[568px]">

To be clear, mockup-phone is not removed. It just doesn't need the artboard class anymore.

Avatar

🔧 Changes

Breaking Change: Renamed online class to avatar-online, offline to avatar-offline, and placeholder to avatar-placeholder.

- <div class="avatar online">
+ <div class="avatar avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

- <div class="avatar offline">
+ <div class="avatar avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

Badge

🆕 Additions

Added badge-dash, and badge-soft styles.
Added badge-xl size.
Added a default gap-2 between content of badge so you don't have to add it manually to put a space between the text and icon.

🔧 Changes

Adjusted sizes based on the new scale.

Breadcrumbs

🆕 Additions

Added a default gap-2 for the element inside list item so you don't have to add it manually to put a space between the text and icon.

🗑️ Removals

Breaking Change: Removed bottom-nav component. Use dock component instead.
Breaking Change: Removed btm-nav-xs, btm-nav-sm, btm-nav-md, btm-nav-lg. Use dock-xs, dock-sm, dock-md, dock-lg instead.
Breaking Change: Removed btm-nav-active. Use dock-active instead.
Breaking Change: Removed disabled class of bottom-nav. Use aria-disabled="true" attribute or disabled attribute if it's a button. This is for better accessibility.

- <div class="btm-nav btm-nav-sm">
+ <div class="dock dock-sm">
  <button>🏠</button>
-   <button class="active">🍿</button>
+   <button class="dock-active">🍿</button>
  <button>⚙️</button>
</div>

Button

🆕 Additions

Added btn-xl size.
Added btn-dash and btn-soft styles.
Added box-shadow with if --depth effect is enabled.

🔧 Changes

Reworked click animation which is now more subtle and fits better with any size of the button.
Adjusted size scale.
Adjusted font-size.
Adjusted padding.
Improved disabled state styling.
Breaking Change: Default height reduced; customizable via --size-field.
checked button (checkbox, radio) now has outline instead of forced primary color. This allows customization like checked:btn-secondary
btn-ghost hover style is changed. In v4 btn-ghost had a specific hover style overriding any color modification. For example in btn btn-ghost btn-primary the button would'nt look primary. In v5 btn-ghost now looks as a ghost only before hover. It shows the original color on hover.

Card

🆕 Additions

Added card-border and card-dash styles which adapts the border width from the theme.
Added support for different card sizes (card-xs, card-sm, card-md, card-lg, card-xl).
Allow <label class="card"> to be used as a radio card. If a checkbox or radio is directly inside a card, clicking the card will toggle the checkbox/radio and will show an outline around the card.

🔧 Changes

Breaking Change: card-bordered is renamed to card-border.
Adjusted padding in card body.
Adjusted font size.

- <div class="card card-bordered">
+ <div class="card card-border">

🗑️ Removals

Removed card-compact. Use card-sm instead.

Chat

🆕 Additions

Added chat-bubble-neutral color.

🔧 Changes

Breaking Change: Changed chat bubble default color from neutral to base-300. Add chat-bubble-neutral if you want to keep using the neutral color.
Improved chat bubble tail shape to a prettier shape.
Adjusted bubble sizes to fit with other components.
Adjusted font size for headers/footers.

Checkbox

🆕 Additions

Added checkbox-xl size.
Added checkbox-neutral color.
Checkbox is now print-friendly.

🔧 Changes

Default styles have been significantly altered based on the new theming system.
Improved the checkmark icon and animation.
Improved focus styling for better accessibility.
Adjust size scale to fit with other components.
Improve forced color mode for better accessibility.

Countdown

🆕 Additions

Accessibility improvements for screen readers.

Diff

🆕 Additions

Add ability to focus on each side using keyboard navigation.
Add ability to focus on each side using tap on iOS Safari.

🔧 Changes

Images are now in chronological order. first image is diff-item-1 and second image is diff-item-2.
Fix Firefox lag issue.
Updated HTML syntax to support iOS and keyboard navigation. tabindex="0" allows focus on the element using keyboard navigation or tap on iOS Safari where CSS resize property is not supported. `diff:page.html
<figure class="diff aspect-16/9">
<figure class="diff aspect-16/9" tabindex="0">
</figure> ```

🆕 Additions

Using CSS focus method, clicking the dropdown button again will now close the dropdown ✅
Added support for the new HTML popover attribute. HTML popover is the new standard for creating dropdowns in HTML. It prevents any overflow edge case issues and any z-index issues.
Added support for the new CSS Anchor positioning (Currently only works on Chromium-based browsers. Other browsers will position the dropdown on the middle of the screen, like a modal).

🔧 Changes

Uses CSS @starting-style now.
Uses display instead of visibility to show/hide the dropdown to prevent overflow issues.

Divider

🆕 Additions

Divider is now print-friendly.

FileInput

🆕 Additions

Added file-input-xl size.

🔧 Changes

Adjusted size scale to fit with other components.
Adjusted padding.
Adjusted font-size.
Breaking Change: File input now has border by default. Use file-input-ghost if you want to remove the border.

🗑️ Removals

Breaking Change: Removed file-input-bordered. File input has a border by default now. Use file-input-ghost if you want to remove the border.

- <input type="file" class="file-input file-input-bordered">
+ <input type="file" class="file-input">

🆕 Additions

Added support for horizontal and vertical layouts (footer-horizontal, footer-vertical).

🔧 Changes

Breaking Change: Footer is now vertical by default. Use footer-horizontal to make it horizontal at the screen size you want.

- <footer class="footer">
+ <footer class="footer md:footer-horizontal">

Input

🆕 Additions

Add new input-xl size.

🔧 Changes

Breaking Change: Input now has a default width of 20rem, no need for adding w-full max-w-xs.
Breaking Change: Removed input-border.Input has a border by default now. Use input-ghost if you want to remove the border.
Adjusted padding.
Adjust size scale to fit with other components.
Improved focus style.

🗑️ Removals

Breaking Change: Removed input-bordered class (not needed anymore).

<!-- Input with border -->
<input class="input input-bordered"/>

<!-- Input without border -->
<input class="input"/>

<!-- Input with 20rem width -->
<input class="input w-full max-w-xs"/>

<!-- Input with border -->
<input class="input"/>

<!-- Input without border -->
<input class="input input-ghost"/>

<!-- Input with consistent width -->
<input class="input"/>

Join

🔧 Changes

Refactor the structure to be more compatible with all buttons and fields.

Kbd

🆕 Additions

Added new kbd-xl size.

Label

🔧 Changes

Breaking Change: Label has been refactored to be more compatible with form elements. See label docs for more information.

Loading

🔧 Changes

Added new loading-xl size.
Use SVG animation instead of CSS animation for better performance.
Fix Safari bug where the animation was stuck sometimes.

Mask

🗑️ Removals

Breaking Change: Removed mask-parallelogram, mask-parallelogram-2, mask-parallelogram-3, and mask-parallelogram-4. These mask styles are no longer included in the library. If you need them, manually use the CSS

🆕 Additions

Added new menu-xl size.

🔧 Changes

Improve hover effects to menu items.
Adjusted padding, font-size, and height to match other components.
Easier style customization for the menu items.
Breaking Change: vertical menu is not w-full anymore. Use w-full if you want it to be full width.
Breaking Change: Renamed disabled class of menu item to menu-disabled.
Breaking Change: Renamed active class of menu item to menu-active.
Breaking Change: Renamed focus class of menu item to menu-focus.

- <ul class="menu">
+ <ul class="menu w-full">

-   <li class="disabled"><a>disabled item</a></li>
+   <li class="menu-disabled"><a>disabled item</a></li>

-   <li class="active"><a>active item</a></li>
+   <li class="menu-active"><a>active item</a></li>

-   <li class="focus"><a>focus item</a></li>
+   <li class="menu-focus"><a>focus item</a></li>
</ul>

Mockup

🔧 Changes

Breaking Change: Rename camera class in mockup-phone to mockup-phone-camera.
Breaking Change: Rename display class in mockup-phone to mockup-phone-display.
Breaking Change: mockup-phone-display

<div class="mockup-phone">
-  <div class="camera"></div>
+  <div class="mockup-phone-camera"></div>

-    <div class="display">
+    <div class="mockup-phone-display">

-    <div class="artboard artboard-demo phone-1">Hi.</div>
+    <div class="w-[320px] h-[568px]">Hi.</div>
  </div>
</div>

🆕 Additions

Added new modal-start and modal-end positioning options.

🔧 Changes

Uses CSS @starting-style now
Uses display instead of visibility to show/hide the modal.

Radial Progress

🆕 Additions

Added animation to --value when it changes.
Accessibility improvements for screen readers.

Radio

🆕 Additions

Added new radio-xl size.
Radio is now print-friendly.

🔧 Changes

Improve size scale to fit with other components.
Improve forced color mode for better accessibility.

Range

🆕 Additions

Added new range-xl size.

🔧 Changes

improve the visual appeal of the range component.
Improve size scale to fit with other components.
Improve forced color mode for better accessibility.

Rating

🆕 Additions

Accessibility improvements for screen readers.

🔧 Changes

Fix the issue of unchecked radio inputs looking like checked ones.
Improve the click and focus animations

Select

🆕 Additions

Added new select-xl size.

🔧 Changes

Breaking Change: Select now has a default width of 20rem, no need for adding w-full max-w-xs. max-w-none class.
Breaking Change: Removed select-border. Select has a border by default now. Use select-ghost if you want to remove the border.
Adjusted padding, height, and font-size to match other components.

<!-- Select with border -->
<select class="select select-bordered">

<!-- Select without border -->
<select class="select">

<!-- Select with consistent width -->
<select class="select w-full max-w-xs">

<!-- Select with border -->
<select class="select">

<!-- Select without border -->
<select class="select select-ghost">

<!-- Select with consistent width -->
<select class="select">

Stack

🆕 Additions

Added support for different stack directions stack-bottom, stack-top, stack-start, stack-end.

🔧 Changes

Stack uses CSS grid now.
Breaking Change: Instead of setting the width and height of the stack items, use width and height for the stack itself.

- <div class="stack">
-   <div class="card bg-base-100 w-36 h-36">Text</div>
-   <div class="card bg-base-100 w-36 h-36">Text</div>
-   <div class="card bg-base-100 w-36 h-36">Text</div>
+ <div class="stack w-36 h-32">
+   <div class="card bg-base-100">Text</div>
+   <div class="card bg-base-100">Text</div>
+   <div class="card bg-base-100">Text</div>
</div>

Stat

🔧 Changes

Breaking Change: stats background color is now transparent. Use bg-base-100 if you need a background color.

Steps

🆕 Additions

Add new step-icon class for custom icons inside step.
Steps is now print-friendly.

Tab

🆕 Additions

Added new tab-xl size.
Adjusted padding, font-size, and height to match other components.
Added ability to customize the tab height from theme CSS variables. Check out the Theme Generator page to see how it works.
Added new tabs-top and tabs-bottom positioning options.
Accessibility improvements for screen readers and forced color mode.

🔧 Changes

Changed and refactored tabs and tab-content from a grid to flex, allowing us to fix the unstable margin issue at the end of the tab-content which was a side-effect of using infinite grid columns in v4, to push the tabs to the left while keeping the content full width. flex and flex order gives us more control over in this layout.
Breaking Change: Renamed tabs-lifted to tabs-lift.

- <div class="tabs tabs-lifted">
+ <div class="tabs tabs-lift">

Table

🆕 Additions

Added new table-xl size.

🔧 Changes

Breaking Change: Removed hover class. Use hover:bg-base-300 (or any other color) instead.

- <tr class="hover">
+ <tr class="hover:bg-base-300">

Textarea

🆕 Additions

Added new textarea-xl size.

🔧 Changes

Breaking Change: Removed textarea-border. Textarea has a border by default now. Use textarea-ghost if you want to remove the border.

Timeline

🆕 Additions

Timeline is now print-friendly.

Toggle

🆕 Additions

Added new toggle-xl size.
Added toggle-neutral color.
Allow using custom icons for the toggle. Example
Toggle is now print-friendly.

🔧 Changes

Uses CSS pseudo-elements for the toggle thumb instead of box shadow which is visually more accessible.
Improve forced color mode for better accessibility.

🆕 Additions

Added new optional tooltip-content class, allowing HTML content inside the tooltip.
Added smooth transition and animation for all directions.

🔧 Changes

Changed tooltip tail shape to a prettier shape.

Typography

🔧 Changes

daisyUI now only applies colors to @tailwindcss/typography plugin, not other modifications like padding. You can customize those according to @tailwindcss/typography config If you want other modifications from v4, Here's the CSS

Other removals

🗑️ Remove form-control, label-text, label-text-alt

You can still use the same HTML still, but class names don't exist anymore and won't apply color, font-size, flex, etc.
I suggest using the newly added class names for fieldset and legend elements for better accessibility.

<label class="form-control w-full max-w-xs">
  Login
  <div class="label">
    <span class="label-text">Name</span>
  </div>
  <input class="input" placeholder="Name" />
</label>

<fieldset class="fieldset">
  <legend>Login</legend>
  <label class="label" for="name">Name</label>
  <input id="name" class="input" placeholder="Name" />
</fieldset>

<label class="form-control w-full max-w-xs">
  <div class="label">
    <span class="label-text">What is your name?</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<fieldset class="fieldset max-w-xs">
  <label class="label flex justify-between" for="name">
    <span>What is your name?</span>
    <span>Top Right label</span>
  </label>
  <input id="name" class="input" placeholder="Name" />
  <label class="label flex justify-between" for="name">
    <span>Bottom Left label</span>
    <span>Bottom Right label</span>
  </label>
</fieldset>

🗑️ Remove btn-group and input-group

btn-group, input-group were deprecated a year ago and now finally removed.
If you've been using btn-group or input-group, you can use join instead

<div class="btn-group">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
</div>

<div class="join">
  <button class="btn join-item">Button 1</button>
  <button class="btn join-item">Button 2</button>
</div>

Package detail

readme

daisyUI 5

🌼 Official website →

🌼 See all components →

🌼 How to use →

changelog

Changelog

5.3.9 (2025-10-24)

Bug Fixes

5.3.8 (2025-10-22)

Bug Fixes

5.3.7 (2025-10-16)

Bug Fixes

5.3.6 (2025-10-16)

Bug Fixes

5.3.5 (2025-10-16)

Bug Fixes

5.3.4 (2025-10-16)

Bug Fixes

5.3.3 (2025-10-15)

Bug Fixes

5.3.2 (2025-10-15)

Bug Fixes

5.3.1 (2025-10-14)

Bug Fixes

5.3.0 (2025-10-13)

Features

Bug Fixes

5.2.5 (2025-10-13)

Bug Fixes

5.2.4 (2025-10-13)

5.2.3 (2025-10-11)

Bug Fixes

5.2.2 (2025-10-11)

Bug Fixes

5.2.1 (2025-10-11)

Bug Fixes

5.2.0 (2025-10-10)

Features

Bug Fixes

5.1.32 (2025-10-10)

5.1.31 (2025-10-10)

Bug Fixes

5.1.30 (2025-10-09)

Bug Fixes

5.1.29 (2025-10-07)

Bug Fixes

5.1.28 (2025-10-07)

Bug Fixes

5.1.27 (2025-10-03)

Bug Fixes

5.1.26 (2025-09-30)

Bug Fixes

5.1.25 (2025-09-28)

Bug Fixes

5.1.24 (2025-09-26)

Bug Fixes

5.1.23 (2025-09-25)

Bug Fixes

5.1.22 (2025-09-25)

Bug Fixes

5.1.21 (2025-09-25)

Bug Fixes

5.1.20 (2025-09-25)

Bug Fixes

5.1.19 (2025-09-25)

Bug Fixes

5.1.18 (2025-09-24)

Bug Fixes

5.1.17 (2025-09-24)

Bug Fixes

5.1.16 (2025-09-24)

Bug Fixes

5.1.15 (2025-09-24)

Bug Fixes

5.1.14 (2025-09-22)

Bug Fixes

5.1.13 (2025-09-17)

5.1.12 (2025-09-14)