All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
New loading
component.
Shows a loading spinner and can be used inside any element.
You can choose different spinners: loading-spinner
, loading-dots
, loading-ring
, loading-ball
, loading-bars
, loading-infinity
You can change the color using text-*
utility class.
New accordion.
It’s collapse
but now we can use it with radio buttons which allows us to make a JS-free and accessible accordion.
https://daisyui.com/components/accordion/
New join
class
It’s a replacement for button-group
and input-group
(with a more generic name) and it groups items together vertically or horizontally. It also gives border radius to the first and last item (based on responsive direction) and also if your item have a border, it overlaps the border between items so it looks good automatically.
join
also can apply style to the indirect children. It’s useful when you want ot have a wrapper around your button (for dropdown
, tooltip
, etc.) and you just want to apply style to the actual button, not the wrapper.
https://daisyui.com/components/join/
Now only light
and dark
themes are active by default.
You can enable all themes by adding themes: true
to daisyUI config or you can list the names of the themes you want.
https://daisyui.com/docs/config/
This is a decent improvement for CSS size on majority of websites because most developers use only 2 or 3 themes but all themes being active by default, was increasing the CSS size unnecessarily.
The default dark
theme is now darker and it looks more comfortable when using a website at night.
Following themes had improvements in colors and are now more accessible when combining different elements together:
light
, dark
, bumblebee
, forest
, garden
, halloween
, luxury
, retro
, synthwave
Of course you can still customize the colors as you wish or even add your own themes.
drawer
no longer disables the root element scroll. Now it naturally let’s the root element scroll.
Even with providing a responsive and collapsible sidebar, it no longer has daisyUI 2.x limitations like losing the scroll position when the page is changes or disabling the scroll on the root element.
Now drawer
is hidden by default.
Instead of using uncustomizable drawer-mobile
, we can use a responsive class like lg:drawer-open
to show drawer on specific screen sizes.
Previously it wasn’t customizable and drawer-mobile
was only showing the drawer on lg:
screen size.
Update your drawer class:
- <div class="drawer drawer-mobile">
+ <div class="drawer lg:drawer-open">
modal
now supports the new native HTML element <dialog>
as well.
<dialog>
provides accessibility features without needing JS:
Add new modal-backdrop
class. The backdrop that covers the back of modal so we can close the modal by clicking outside.
Add new modal-top
modifier if you want to align the modal
to the top of the screen (modal-middle
and modal-bottom
are also available)
<button class="btn" onclick="my_modal.showModal()">
open modal
</button>
<dialog id="my_modal" class="modal">
<form method="dialog" class="modal-box">
<p>Content</p>
<button class="btn">Close</button>
</form>
</dialog>
tooltip
now gets visible with keyboard navigation as well.
tooltip
class is now responsive.
You can use responsive prefixes like sm:
, md:
etc to show tooltip
only on specific screen sizes.
All tooltip
position modifiers (tooltip-top
, tooltip-bottom
, tooltip-left
, tooltip-right
) are now responsive as well. So you can move the tooltip to different directions using responsive prefixes. This is useful when your tooltip is on the edge of screen on some screen sizes.
https://daisyui.com/components/tooltip/
New btn-neutral
modifier class for button.
The default btn
is now using bg-base-200
background color instead of neutral
(a high contrast dark color) color.
Previously the default button was using a high contrast color and we didn’t have any options to make a subtle button to look as consistent as other solid colors (primary
, secondary
, etc.)
With this color as a default, we can have consistent set of solid buttons without relying on variants like btn-ghost
or btn-outline
which are not always the best option.
Now when we need a dark button we can use btn-neutral
modifier class.
btn
click animation now has slightly less bounce effect.
The default btn
focus ring color is now neutral
instead of neutral-focus
btn
now has a gap-2
by default. Useful for having text and icons inside a button, next to each other.
New badge-neutral
modifier class for badge.
The default badge
is now using bg-base-200
background color instead of neutral
(same as the default button)
badge inside the menu now justifies to the end by default.
This is useful when you use a badge inside a menu item because it aligns to the end of the menu item automatically.
You can use justify-self-*
to override this behavior.
All new style for menu
All menu levels (ul > li > ul > ...
) now have a consistent style. Showing a visually recognizable hierarchy (instead of opening a floating menu for the 2nd level by default and putting the rest of the levels inside the menu).
This is good news for people who need multiple levels of submenu (either vertical or horizontal)
<ul class="menu">
<li><a>Item 1</a></li>
<li>
<a>Parent</a>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
<li>
<a>Item 3</a>
</li>
</ul>
Using the standard <details>
element now you can have collapsible submenu without any extra class name or tabindex
, without relying on dropdown
.
<!-- Easy collapsible submenu -->
<ul class="menu">
<li><a>Item 1</a></li>
<li>
<details>
<summary>Parent</summary>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
<li>
</details>
<a>Item 3</a>
</li>
</ul>
This allows us to easily create a multi-level 👏 collapsible 👏 accessible 👏 JS-free 👏 responsive 👏 and still customizable 👏 menu just by using a class name
https://daisyui.com/components/menu/#collapsible-submenu
Also, you can now create responsive “mega menus” using daisyUI.
See all examples: https://daisyui.com/components/menu/
Menu items are slightly smaller now. This makes more consistency with other components.
Now menu has padding by default. No need for p-*
class
Menu items have border radius by default (you can change it using rounded-*
utility classes)
instead of menu-compact
class now we have the standard sizing utilities like other elements:
menu-xs
menu-sm
menu-md
menu-lg
<li>
with active
class now has a neutral
background color instead of primary
. This creates a better design hierarchy and moves the focus to the more important elements like “call to action” buttons.
new class name menu-dropdown-toggle
for the parent item if you want to control it using JS
new class name menu-dropdown
for the collapsed submenu if you want to control it using JS
new modifier class name menu-dropdown-show
for to reveal the collapsed submenu if you want to control it using JS
https://daisyui.com/components/menu/#collapsible-submenu-that-works-with-class-names
badge
inside the menu item now justifies to the end by default.
New .focus
class for menu items applies the same style when you focus the menu item using a mouse. This class name is useful if you want to apply styles for keyboard navigation as well.
dropdown
now supports <details>
tag as well.
This allows us to close the dropdown on second click or control the dropdown using JavaScript.
Class names are the same as before, but the HTML structure is simpler.
<details class="dropdown">
<summary class="btn">open or close</summary>
<div class="dropdown-content">Content</div>
</details>
The former HTML structure of dropdown
(using CSS focus) is still supported and you can use whichever you prefer.
carousel
is now inline-flex
by default (instead of flex
)
This makes it easier to use carousel aside other elements.
btn
class can now be used on <input type=radio>
and <input type=checkbox>
as well.
This is really usefull when you want to make a group of buttons visually those buttons are just changing a value. It’s also better for accessibility because it’s a native HTML element, it supports keyboard navigation and you won’t need to deal with JavaScript or hidden inputs and labels.
<input type="radio" aria-label="Option 1" class="btn" />
<input type="radio" aria-label="Option 2" class="btn" />
The aria-label
value will be shown inside the button by default and it’s also accessible for screen readers.
When radio input is checked, it gets the primary color (but you can customize it of course)
Same thing for checkbox:
<input type="checkbox" aria-label="Check me!" class="btn" />
https://daisyui.com/components/button/#buttons-with-different-html-tags
New style for .table
Starting with daisyUI 3.0, .table
has a less opinionated style. It allows us to use tables on every surface colors and apply our own background color if needed.
Previously every table cell had background color and the whole table had a very opinionated border radius, header color, etc. This was not very flexible and it was hard to customize. But now you can use utility classes to customize the table as you wish.
table
now has 4 sizes: table-xs
, table-sm
, table-md
, table-lg
which provides different font sizes and paddings to fit well on different screen sizes.
New modifier class names table-pin-rows
and table-pin-cols
for table
These classes are useful when you want to pin the heading row or heading column of a table. It’s useful for tables with a lot of columns or rows.
Previously table’s first header was pinned by default and this was limiting the use cases. Now you can use these classes only if you want the header to be pinned.
table-pin-rows
makes the row inside <thead>
sticky to top and the row inside <tfoot>
sticky to bottom.
table-pin-cols
makes the <th>
columns sticky to left and right automatically.
Improve collapse
transition. No more jumps.
collapse
now works with <details>
tag as well.
This allows us to create a collapsible content without any extra class name or tabindex
, without relying on CSS :focus
.
<details class="collapse">
<summary class="collapse-title">Click to open/close</summary>
<div class="collapse-content">content</div>
</details>
This is useful when you want to create a collapsible content that is accessible and works without JavaScript.
collapse
now works with radio inputs as well.
This allows you to create an accordion JS-free where opening 1 item closes the other items.
<div class="collapse">
<input type="radio" name="my-accordion-1" checked="checked" />
<div class="collapse-title">Click to open this and close others</div>
<div class="collapse-content">Content</div>
</div>
<div class="collapse">
<input type="radio" name="my-accordion-1" />
<div class="collapse-title">Click to open this and close others</div>
<div class="collapse-content">Content</div>
</div>
<div class="collapse">
<input type="radio" name="my-accordion-1" />
<div class="collapse-title">Click to open this and close others</div>
<div class="collapse-content">Content</div>
</div>
:hover
styles are now only available on devices that actually support hover.
On devices without hover, It’s always annoying to work with elements that have hover styles because with the first tap, the hover style is applied and it won’t go away until you tap somewhere else. This is confusing and annoying for a lot of people and it’s not a good user experience.
Starting with daisyUI 3.0, hover styles are disabled on devices that don’t support hover.
Now :disabled
buttons and form elements have a disabled style as well. Previously the style was only applied to the elements with disabled
attribute or *-disabled
class name.
This is useful when you want to disable the whole form using a fieldset.
Removed drawer-mobile
class. If you want to have a fixed drawer on desktop but you want to hide it on mobile use lg:drawer-open
instead (or any other responsive prefix)
Update your HTML:
- <div class="drawer drawer-mobile">
+ <div class="drawer lg:drawer-open">
Removed extra wrapper <div>
from alert
.
The previous HTML structure was not very efficient and it was causing many confusions because that extra div was necessary for the style to work properly.
Update your alert
structure and remove that extra div inside <div class="alert">
:
<div class="alert">
- <div>
<span>12 unread messages. Tap to see.</span>
- </div>
</div>
table
now has a width: 100%
by default.
This may not be a breaking change for most people. Most developers already want the table to fill the width and they use it with w-full
class or the data itself is long enough to cover the width. But if you have a small table, placed next to other elements, you should now add w-auto
or another width class to the table to make it smaller.
table
doesn’t have a active
modifier class anymore
With the new style you can use utility classes to apply background color for a row. Previously it wasn’t possible because each cell had a background color and we had to rely on a new modifier class like active
. Now you can use bg-base-200
or any other color.
- <tr class="active">
+ <tr class="bg-base-200">
table
doesn’t have a hover
modifier class anymore
Now you can use hover:bg-base-200
or any other color instead. It’s more flexible and you don’t have to style each table cell separately.
- <tr class="hover">
+ <tr class="hover:bg-base-200">
table
doesn’t have a table-compact
modifier class anymore.
Use one of these new size modifiers instead:
table-xs
, table-sm
, table-md
, table-lg
- <table class="table table-compact">
+ <table class="table table-sm">
btn
default color is base-200
now.
This creates consistency for all our solid button variants while providing access to the whole color palette.
You can use the new modifier btn-neutral
if you prefer to keep the former color (neutral
) for your button:
- <button class="btn">Button</button>
+ <button class="btn btn-neutral">Button</button>
dropdown
doesn’t have a z-index
by default now.
Using z-index for dropdown
as a default style was a mistake because sometimes we need elements on top of the dropdown and sometimes we want the dropdown to be on top of other elements. Now you can use z-[1]
or any other z-index class to control it as you want.
badge
inside btn
now doesn’t inherit the btn
color automatically anymore. This was a bad design decision and it was limiting us to customize badge
colors when it’s inside a btn
loading
is no longer a modifier class for btn
. Instead you can use the new loading
component class inside the button. This allows us to put the loading whereever we need it.
- <button class="btn loading">
- loading
- </button>
+ <button class="btn">
+ <span class="loading"></span>
+ loading
+ </button>
step
connectors not being visible on RTL mode.radio
animation on Safari.dropdown-hover
not working when focused using keyboard.tooltip
arrow using pixel formats and causing inaccurate positioning with different browser zoom levels.toast
whitespace issue/src/colors
is renamed to /src/theming
because it’s doing more than colors and the previous name was confusing.tab-disabled
class name for visually disabling a tab itemtabs-boxed
(not just the active tab)menu-title
opacity and color inheritance (bec2094)rating
border radius on mobile (df41fbc)textarea
now has xs
, sm
, md
and lg
sizes: #1462A tooltip
without a data-tip
attribute will not show an empty tooltip anymore #1501
Fix bordered menu entry on sub menus #1536
chat
(3887c6e)chat
(522bc5e)toggle
now looks different from unchecked toggleoverflow: hidden
. Instead, the figure will adapt the card border radius, fix: #1175 (10786e6)color-scheme
for scrollbar etc. (40bab42)darkTheme
config now can be false
to disable prefers-color-scheme: dark
(d7688cc)Add the following color variants
for the following components:
btn-group-horizontal
and btn-group-vertical
classes are now responsive (f27340b)collapse
(e0fa734)mask
stylesThis modal works with a hidden checkbox!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!