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.
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.
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.
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.
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.
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).
before
<!-- 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"/>
after
<!-- 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.
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.
Uses CSS pseudo-elements for the toggle thumb instead of box shadow which is visually more accessible.
Improve forced color mode for better accessibility.
Tooltip
🆕 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
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.