v5.3.9

Compare Source

Bug Fixes

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

v5.3.8

Compare Source

Bug Fixes

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

v5.3.7

Compare Source

Bug Fixes

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

v5.3.6

Compare Source

Bug Fixes

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

v5.3.5

Compare Source

Bug Fixes

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

v5.3.4

Compare Source

Bug Fixes

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

v5.3.3

Compare Source

Bug Fixes

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

v5.3.2

Compare Source

Bug Fixes

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

v5.3.1

Compare Source

Bug Fixes

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

v5.3.0

Compare Source

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

v5.2.5

Compare Source

Bug Fixes

• fix version mismatch (3198cda)

v5.2.4

Compare Source

v5.2.3

Compare Source

Bug Fixes

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

v5.2.2

Compare Source

Bug Fixes

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

v5.2.1

Compare Source

Bug Fixes

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

v5.2.0

Compare Source

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

v5.1.32

Compare Source

v5.1.31

Compare Source

Bug Fixes

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

v5.1.30

Compare Source

Bug Fixes

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

v5.1.29

Compare Source

Bug Fixes

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

v5.1.28

Compare Source

Bug Fixes

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

v5.1.27

Compare Source

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)

v5.1.26

Compare Source

Bug Fixes

• navbar default position (f75a5ed)

v5.1.25

Compare Source

Bug Fixes

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

v5.1.24

Compare Source

Bug Fixes

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

v5.1.23

Compare Source

Bug Fixes

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

v5.1.22

Compare Source

Bug Fixes

• unwanted box shadow of kbd inside prose (233c58a)

v5.1.21

Compare Source

Bug Fixes

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

v5.1.20

Compare Source

Bug Fixes

• allow height customization for select with multiple attribute (8292854)

v5.1.19

Compare Source

Bug Fixes

• Update dependencies

v5.1.18

Compare Source

Bug Fixes

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

v5.1.17

Compare Source

Bug Fixes

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

v5.1.16

Compare Source

Bug Fixes

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

v5.1.15

Compare Source

Bug Fixes

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

v5.1.14

Compare Source

Bug Fixes

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

v5.1.13

Compare Source

v5.1.12

Compare Source

Bug Fixes

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

v5.1.11

Compare Source

Bug Fixes

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

v5.1.10

Compare Source

Bug Fixes

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

v5.1.9

Compare Source

Bug Fixes

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

v5.1.8

Compare Source

v5.1.7

Compare Source

Bug Fixes

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

v5.1.6

Compare Source

Bug Fixes

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

v5.1.5

Compare Source

Bug Fixes

• checkbox background color (fd938ab)

v5.1.4

Compare Source

Bug Fixes

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

v5.1.3

Compare Source

v5.1.2

Compare Source

Bug Fixes

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

v5.1.1

Compare Source

Bug Fixes

• Update dependencies

v5.1.0

Compare Source

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

v5.0.55

Compare Source

v5.0.54

Compare Source

Bug Fixes

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

v5.0.53

Compare Source

Bug Fixes

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

v5.0.52

Compare Source

Bug Fixes

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

v5.0.51

Compare Source

Bug Fixes

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

v5.0.50

Compare Source

Bug Fixes

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

v5.0.49

Compare Source

Bug Fixes

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

v5.0.48

Compare Source

Bug Fixes

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

v5.0.47

Compare Source

Bug Fixes

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

v5.0.46

Compare Source

v5.0.43

Compare Source

Bug Fixes

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

v5.0.42

Compare Source

Bug Fixes

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

v5.0.41

Compare Source

v5.0.40

Compare Source

Bug Fixes

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

v5.0.39

Compare Source

Bug Fixes

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

v5.0.38

Compare Source

Bug Fixes

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

v5.0.37

Compare Source

Bug Fixes

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

v5.0.36

Compare Source

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

v5.0.35

Compare Source

Bug Fixes

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

v5.0.34

Compare Source

Bug Fixes

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

v5.0.33

Compare Source

Bug Fixes

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

v5.0.32

Compare Source

Bug Fixes

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

v5.0.31

Compare Source

Bug Fixes

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

v5.0.30

Compare Source

Bug Fixes

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

v5.0.29

Compare Source

Bug Fixes

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

v5.0.28

Compare Source

v5.0.27

Compare Source

Bug Fixes

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

v5.0.26

Compare Source

Bug Fixes

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

v5.0.25

Compare Source

Bug Fixes

• kbd border width (eaa78a8)

v5.0.24

Compare Source

Bug Fixes

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

v5.0.23

Compare Source

Bug Fixes

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

v5.0.22

Compare Source

Bug Fixes

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

v5.0.21

Compare Source

Bug Fixes

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

v5.0.20

Compare Source

Bug Fixes

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

v5.0.19

Compare Source

Bug Fixes

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

v5.0.18

Compare Source

Bug Fixes

• validator working with aria-invalid (f4688a3)

v5.0.17

Compare Source

Bug Fixes

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

v5.0.16

Compare Source

Bug Fixes

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

v5.0.15

Compare Source

Bug Fixes

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

v5.0.14

Compare Source

Bug Fixes

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

v5.0.13

Compare Source

Bug Fixes

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

v5.0.12

Compare Source

Bug Fixes

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

v5.0.11

Compare Source

Bug Fixes

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

v5.0.10

Compare Source

Bug Fixes

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

v5.0.9

Compare Source

Bug Fixes

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

v5.0.8

Compare Source

Bug Fixes

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

v5.0.7

Compare Source

v5.0.6

Compare Source

Bug Fixes

• badge color (56390f5)

v5.0.5

Compare Source

v5.0.4

Compare Source

Bug Fixes

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

v5.0.3

Compare Source

Bug Fixes

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

v5.0.2

Compare Source

Bug Fixes

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

v5.0.1

Compare Source

Bug Fixes

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

v5.0.0

Compare Source

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.

- <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.

Bottom Navigation

🗑️ 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.

- <figure class="diff aspect-16/9">
+ <figure class="diff aspect-16/9" tabindex="0">
  <div class="diff-item-1" role="img">
    <img alt="image 1" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
  </div>
-  <div class="diff-item-2" role="img">
+  <div class="diff-item-2" role="img" tabindex="0">
    <img alt="image 2" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
  </div>
  <div class="diff-resizer"></div>
</figure>

Dropdown

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

Footer

🆕 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

Menu

🆕 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