Changelog All notable changes to this project will be documented in this file. See commit-and-tag-version for commit guidelines.
Missing outline and separators for joined buttons. closes: #4586 (3f94950 ) expose btn-active as a utility class. closes: #4584 (99316ff ) add new Aura component add new OTP component add new Megamenu component add vertical range slider with range-vertical add HTML popover support for modal add tooltip alignment utilities with tooltip-start, tooltip-center, and tooltip-end, closes #4229 add new calendar style integration for Vanilla Calendar Pro make rating size modifiers responsive, closes #4367 improve input, textarea, select, and floating label sizing, closes #4370 improve collapse overflow behavior when closed, closes #4419 improve filter keyboard navigation and reset behavior, refs #4424 simplify join styles and prevent nested join leakage, closes #4506 rewrite button styles and improve checked, disabled, soft, ghost, link, and focus states, see #4430 add default styling for customizable select selectedcontent, refs #4549 allow menu elements as .menu containers add selected/selectable card focus and checked styling respect prefers-reduced-motion for loading indicators, closes #4298 revert dropdown overflow clipping for details inside .menu, closes #4343 align horizontal and vertical menu items correctly, closes #4381 prefix CSS variables inside var() without replacing fallback content, closes #4372 , closes #4408 only apply root scroll background image to :root improve root color, scroll gutter, and scroll lock separation keep card outline visible on focus-visible, closes #4421 improve collapse details/summary transitions and styling, closes #4515 highlight select trigger while native picker is open, closes #4528 dropdown animation inside modal Safari quirks for datetime inputs remove text-wrap: balance from menu items make highlighted mockup-code lines span full scroll width, closes #4542 clear React Day Picker range middle cell background, closes #4455 use defined Pikaday theme colors for events and ranges, closes #4496 keep .kbd legible inside colored buttons, closes #4353 prevent footer grid styles from displaying script/style/template children, closes #4471 prevent FAB trigger and labels from being text-selected in Safari fan out first fab-flower action when no main action exists, closes #4531 add modal overlay transition for stacked dialogs adjust swap layers, closes #4574 make swap-active work with rotate and flip, closes #4553 give select-ghost picker a non-transparent background, closes #4521 improve button border style for keyboard and mouse navigation make diff work inside card and fix CDN hover gallery layering, closes #4416 , closes #4474 improve disabled input label color contrast clean up file input styling improve alert noise size improve diff thumb styling fix menu typo from previous changes add daisyUI 5.6 blog post add docs for Aura, OTP, Megamenu, vertical range, tooltip alignment, popover modal, selectable cards, responsive floating labels, and select dropdown max height add clipboard button to markdown code blocks, closes #4536 add select dropdown max-height example, closes #4440 add collapse usage examples inspired by outside-click patterns, refs #4479 allow hyphens and spaces in theme generator theme names fix mockup-browser background color snippet improve focus indicators for code blocks and headings add Angular install note for modern CSS / color-mix() rendering use CDN-safe alert icon classes add tooltip component to llms.txt document read-only rating pattern in daisyUI skill files update Bun, Tailwind CSS, Lightning CSS, PostCSS, Prettier, and related dependencies add package exports for daisyui update daisyUI skill files for new and changed components Blurry text/rendering in Drawer on Chrome/Windows. closes: #4545 (b045f55 ) use logical margins for breadcrumbs so it works in RTL. closes: #4443 (6208471 ) hide underline for .btn when used in .prose closes #4400 (c1e1e11 ) allow .list-col-wrap to work with Tailwind CSS variant prefixes. closes: #4336 (56ef803 ) add transition for collapse min-height. closes: #2615 (600ab73 ) range color issue when there's a ling range slider on a ultrawide screen (#4335 ). closes #4334 (810f519 ) rule priority for .drawer-end and .drawer-open. closes #4331 (82e68d4 ) badge padding to respect --size-selector, clean up kbd and tab padding properties. closes: #4293 (e713958 ) cleanup a few instances of calc in tabs and FAB (#4292 ) (589c5ad ) prefix for is-drawer-close and is-drawer-open. closes: #4197 (f3005f4 ) new component hover-3d to make a 3D card new component text-rotate to rotate between multiple words new skeleton variant: skeleton-text for animated gradient text improve diff drag area improve <code> padding in prose. closes: #4243 new dropdown modifier: dropdown-close to force close a dropdown btn selector improvements (7% smaller CSS size)details in menu now has smooth transition search now includes all class names and variables update disable menu example to be more accessible update llms.txt leaking grid style issue in list (a22e54d ) substract padding from tab-content height for tabs-box (#4235 ) (e59a7a0 ) drawer height issue from 5.4.0 (261b302 ) allow outline on all methods of dropdown, not just summary (624a0a6 ) scrollbar, drawer and modal improvements (e36be21 ) prevent tab style bleeding to children tabs. closes: #4200 (15044b2 ) range thumb color on Safari (2c4a825 ) allow browser to find text in collapse <details> (bde0427 ), closes #4194 easier overriding before/after content using utility classes. closes: #4196 (f2b1e9f ) btn in prose shouldn't have underline by default. closes: #4192 (1205a90 )backdrop color bleeding issue + scrollbar improvements. closes: #3928 (240d1d8 ) validator-hint overrides hidden class as expected. close: #4188 (c05604d )do not show the line before for first step in horizontal orientation (#4187 ) (3cce2c8 ) allow overflow auto for select multiple. Closes: #4178 (b4917f7 ) 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
fix: style for nested validator with aria-invalid attribute. closes: #4176 countdown RTL bug and allow defining number of digits (426de84 ) 5.2.0 (2025-10-10)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 ) 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 focus the first focusable element when modal opens. closes: #3440 (c1e2f0c ) (iOS) increase font size of small text input and textarea on focus so page wont zoom in (3b35fbb ), closes #3871 #1145 prevent select line break on long text when select is not open and prevent page overflow when select is open. closes: #4105 (6782522 ) unwanted box shadow of kbd inside prose (233c58a ) fix: collapse focus-within issue. closes: #4128 fix: text truncate issue. closes: #2965 allow height customization for select with multiple attribute (8292854 ) fix: .prose class not working with daisyUI prefix. closes: #4119 Collapse gets closed when interactive input inside is focused. closes: #4128 (f55cf0e ) diff focus and resizer position on Safari. closes: #4104 (712d0ff ) checkbox background color (fd938ab ) <label class="select"> base-select style and misalignment. closes: #4082 (d1556fa )<select> double arrow on Firefox (748fd54 )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 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 prefersdark theme overriding the default theme in custom themes. closes: #3921 (bd6b064 ) improve text contrast for selected cally dates on hover (#4056 ) (904505f ), closes #4042 styles for disabled inputs and select in fieldset (c60350d ), closes #4021 use semantic fallbacks for checkbox states, improve indeterminate visibility. closes: #3979 (d19f38a ) react-day-picker disableNavigation not styling properly. closes: #3990 (29123bc ) apply theme-aware hover styling to Cally day buttons. closes: #3991 (9960287 ) browser search icon color in dark theme. closes: #4006 (922256d ) badge-outline, badge-dash, badge-soft can be used with tailwind responsive variants. closes: #3643 (2470fe2 ) checkbox in menu should not be grid. closes: #3922 (7f1ca83 ) Chat bubble mask not working with tailwind prefixes. closes: #3847 (c7856f2 ) calendar - react daypicker range bg color. closes: #3918 (d9df966 ) 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 allow tooltip font size customization. closes: #3830 (c1b9d69 ) swap indeterminate not being visible with flip animation. closes: #3806 (42a2fb5 ) prevent double-tap zoom on buttons on mobile (02a401a ) button hover state persisting on mobile screen. closes: #3817 (75c92c9 ) tooltip showing when data-tip or tooltip-content is empty. closes: #3819 (2414ca5 ) toggle padding value inconsistencies. closes: #3746 (59e1575 ) add isolate to drawer-content to avoid z-index overflow. closes: #3790 (488804f ) add isolate to collapse. closes: #3713 (24b4742 ) fix: outline in join element. closes: #3722 fix: toast position. closes: #3738 , closes: #3702 fix: badge-outline border color. closes: #3784 fix: dock-active accepts variants. closes: #3170 validator working with aria-invalid (f4688a3 ) fix: collapse-content transition duplicate, transition typo (#3761 ) fix tabs-box render issue on Nuxt. closes: #3724 dropdown-center RTL, modal gutter, collapse-content animation workaround for lightningcss issue of color mix in &:before. closes: #3758 , closes: #3755 icon position of date input inside input wrapper on chromium-based (#3725 ) closes: #3708 (b1560a6 ) :not(:has()) selectors getting prefix. closes: #3739 (771b6eb )alert unwanted gap if there's one child only. closes: #3702 (6d3eb06 ) 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 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 fix: CDN color opacity utilities fix: dropdown-end position fix: diff outline fix: diff-resizer size and placement fix: checked button style 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 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
🆕 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. 🗑️ 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-1w-[320px] h-[568px]artboard phone-2w-[375px] h-[667px]artboard phone-3w-[414px] h-[736px]artboard phone-4w-[375px] h-[812px]artboard phone-5w-[414px] h-[896px]artboard phone-6w-[320px] h-[1024px]
Before After artboard artboard-horizontal phone-1w-[568px] h-[320px]artboard artboard-horizontal phone-2w-[667px] h-[375px]artboard artboard-horizontal phone-3w-[736px] h-[414px]artboard artboard-horizontal phone-4w-[812px] h-[375px]artboard artboard-horizontal phone-5w-[896px] h-[414px]artboard artboard-horizontal phone-6w-[1024px] h-[320px]
page.html
- <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.
🔧 Changes
Breaking Change: Renamed online class to avatar-online, offline to avatar-offline, and placeholder to avatar-placeholder.page.html
- <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> page.html
- <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> 🆕 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. 🆕 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 dockBreaking 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.page.html
- <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> 🆕 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.🆕 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. page.html
- <div class="card card-bordered"> + <div class="card card-border"> 🗑️ Removals
Removed card-compact. Use card-sm instead. 🆕 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. 🆕 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. 🆕 Additions
Accessibility improvements for screen readers. 🆕 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. page.html
- <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> 🆕 Additions
Using CSS focus method, clicking the dropdown button again will now close the dropdown ✅ Added support for the new HTML popover Added support for the new CSS Anchor positioning 🔧 Changes
Uses CSS @starting-style now. Uses display instead of visibility to show/hide the dropdown to prevent overflow issues. 🆕 Additions
Divider is now print-friendly. 🆕 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.page.html
- <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.page.html
- <footer class="footer"> + <footer class="footer md:footer-horizontal"> 🆕 Additions
🔧 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).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 " /> 🔧 Changes
Refactor the structure to be more compatible with all buttons and fields. 🆕 Additions
🔧 Changes
Breaking Change: Label has been refactored to be more compatible with form elements. See label docs for more information.🔧 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. 🗑️ 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
🔧 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.page.html
- <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> 🔧 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-displaypage.html
<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. 🆕 Additions
Added animation to --value when it changes. Accessibility improvements for screen readers. 🆕 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. 🆕 Additions
🔧 Changes
improve the visual appeal of the range component. Improve size scale to fit with other components. Improve forced color mode for better accessibility. 🆕 Additions
Accessibility improvements for screen readers. 🔧 Changes
Fix the issue of unchecked radio inputs looking like checked ones. Improve the click and focus animations 🆕 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.
before
<!-- 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 " > after
<!-- Select with border --> <select class = " select " > <!-- Select without border --> <select class = " select select-ghost " > <!-- Select with consistent width --> <select class = " select " > 🆕 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.page.html
- <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> 🔧 Changes
Breaking Change: stats background color is now transparent. Use bg-base-100 if you need a background color.🆕 Additions
Add new step-icon class for custom icons inside step. Steps is now print-friendly. 🆕 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.page.html
- <div class="tabs tabs-lifted"> + <div class="tabs tabs-lift"> 🆕 Additions
🔧 Changes
Breaking Change: Removed hover class. Use hover:bg-base-300 (or any other color) instead.page.html
- <tr class="hover"> + <tr class="hover:bg-base-300"> 🆕 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.🆕 Additions
Timeline is now print-friendly. 🆕 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. 🔧 Changes
daisyUI now only applies colors to @tailwindcss/typography plugin, not other modifications like padding. You can customize those according to @tailwindcss/typography configHere'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.fieldset and legend elements for better accessibility.
before
<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> after
<fieldset class = " fieldset " > <legend> Login </legend> <label class = " label " for = " name " > Name </label> <input id = " name " class = " input " placeholder = " Name " /> </fieldset> before
<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> after
<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> btn-group, input-group were deprecated a year ago and now finally removed.join instead
before
<div class = " btn-group " > <button class = " btn " > Button 1 </button> <button class = " btn " > Button 2 </button> </div> after
<div class = " join " > <button class = " btn join-item " > Button 1 </button> <button class = " btn join-item " > Button 2 </button> </div>