All notable changes to this project will be documented in this file. See commit-and-tag-version for commit guidelines.
aria-invalid (f4688a3)<label> double caret. closes: #3613This 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
alert-outline, alert-dash, and alert-soft variants.alert-vertical and alert-horizontal layout options.🔧 Changes
max-sm:alert-horizontal or any other responsive breakpoint.🗑️ Removals
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.
🔧 Changes
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>🆕 Additions
badge-dash, and badge-soft styles.badge-xl size.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
🆕 Additions
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
bottom-nav component. Use dock component instead.btm-nav-xs, btm-nav-sm, btm-nav-md, btm-nav-lg. Use dock-xs, dock-sm, dock-md, dock-lg instead.btm-nav-active. Use dock-active instead.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>🆕 Additions
btn-xl size.btn-dash and btn-soft styles.--depth effect is enabled.🔧 Changes
--size-field.checked:btn-secondarybtn-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
card-border and card-dash styles which adapts the border width from the theme.card-xs, card-sm, card-md, card-lg, card-xl).<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
card-bordered is renamed to card-border.- <div class="card card-bordered">
+ <div class="card card-border">🗑️ Removals
card-compact. Use card-sm instead.🆕 Additions
chat-bubble-neutral color.🔧 Changes
neutral to base-300. Add chat-bubble-neutral if you want to keep using the neutral color.🆕 Additions
checkbox-xl size.checkbox-neutral color.🔧 Changes
🆕 Additions
🆕 Additions
🔧 Changes
diff-item-1 and second image is diff-item-2.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>🆕 Additions
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.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
@starting-style now.display instead of visibility to show/hide the dropdown to prevent overflow issues.🆕 Additions
🆕 Additions
file-input-xl size.🔧 Changes
file-input-ghost if you want to remove the border.🗑️ Removals
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
footer-horizontal, footer-vertical).🔧 Changes
footer-horizontal to make it horizontal at the screen size you want.- <footer class="footer">
+ <footer class="footer md:footer-horizontal">🆕 Additions
input-xl size.🔧 Changes
w-full max-w-xs.input-border.Input has a border by default now. Use input-ghost if you want to remove the border.🗑️ Removals
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"/>🔧 Changes
🆕 Additions
kbd-xl size.🔧 Changes
🔧 Changes
loading-xl size.🗑️ Removals
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
menu-xl size.🔧 Changes
w-full anymore. Use w-full if you want it to be full width.disabled class of menu item to menu-disabled.active class of menu item to menu-active.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>🔧 Changes
camera class in mockup-phone to mockup-phone-camera.display class in mockup-phone to mockup-phone-display.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
modal-start and modal-end positioning options.🔧 Changes
@starting-style nowdisplay instead of visibility to show/hide the modal.🆕 Additions
--value when it changes.🆕 Additions
radio-xl size.🔧 Changes
🆕 Additions
range-xl size.🔧 Changes
🆕 Additions
🔧 Changes
🆕 Additions
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">🆕 Additions
stack-bottom, stack-top, stack-start, stack-end.🔧 Changes
- <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
stats background color is now transparent. Use bg-base-100 if you need a background color.🆕 Additions
step-icon class for custom icons inside step.🆕 Additions
tab-xl size.tabs-top and tabs-bottom positioning options.🔧 Changes
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.tabs-lifted to tabs-lift.- <div class="tabs tabs-lifted">
+ <div class="tabs tabs-lift">🆕 Additions
table-xl size.🔧 Changes
hover class. Use hover:bg-base-300 (or any other color) instead.- <tr class="hover">
+ <tr class="hover:bg-base-300">🆕 Additions
textarea-xl size.🔧 Changes
textarea-border. Textarea has a border by default now. Use textarea-ghost if you want to remove the border.🆕 Additions
🆕 Additions
toggle-xl size.toggle-neutral color.🔧 Changes
🆕 Additions
tooltip-content class, allowing HTML content inside the tooltip.🔧 Changes
🔧 Changes
@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 CSSYou 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>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>