Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

3.0.24 (2023-06-10)

3.0.23 (2023-06-10)

3.0.22 (2023-06-09)

3.0.21 (2023-06-09)

Bug Fixes

3.0.20 (2023-06-07)

3.0.19 (2023-06-07)

3.0.18 (2023-06-07)

Bug Fixes

3.0.5 (2023-06-07)

Bug Fixes

3.0.4 (2023-06-07)

Bug Fixes

3.0.2 (2023-06-03)

Bug Fixes

3.0.1 (2023-06-02)

Bug Fixes

3.0.0 (2023-06-01)

daisyui3

New components

  • New loading component.

    loading

    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.

    https://daisyui.com/components/loading/

  • New accordion.

    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

    join

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/

Theme improvements

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

    colors

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

New features on components

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

    https://daisyui.com/components/drawer/

  • modal now supports the new native HTML element <dialog> as well.

    <dialog> provides accessibility features without needing JS:

    • Locks the focus inside the modal
    • Closes the modal when you press the escape key
    • Can be closed when you click outside the modal
    • Prevents z-index issues
    • Accessible for screen readers

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

    https://daisyui.com/components/modal/

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

    tooltip

https://daisyui.com/components/tooltip/

  • New btn-neutral modifier class for button.

    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.

    https://daisyui.com/components/button/

  • New badge-neutral modifier class for badge.

    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.

    https://daisyui.com/components/badge/

  • All new style for menu

    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>

    https://daisyui.com/components/menu/#submenu

  • 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)

    menu-2

  • instead of menu-compact class now we have the standard sizing utilities like other elements:

    • menu-xs
    • menu-sm
    • menu-md
    • menu-lg

    https://daisyui.com/components/menu/#menu-sizes

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

    dropdown

    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.

    https://daisyui.com/components/dropdown/

  • 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

    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.

    https://daisyui.com/components/table/

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

    https://daisyui.com/components/collapse/

General improvements

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

Breaking changes

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

Bug fixes:

  • Fix step connectors not being visible on RTL mode.
  • Fix radio animation on Safari.
  • Fix dropdown-hover not working when focused using keyboard.
  • Fix tooltip arrow using pixel formats and causing inaccurate positioning with different browser zoom levels.
  • Fix toast whitespace issue

Developer experience improvements

  • In the package, directory /src/colors is renamed to /src/theming because it’s doing more than colors and the previous name was confusing.
  • Remove extra dev dependencies.
  • Console log is now more informative. It warns you about possible config issues and how to fix them.
  • daisyUI repo itself is now smaller in size and it takes less disk space. Also the new document website is running on the latest version of SvelteKit and Vite.

2.51.5 (2023-03-21)

Bug Fixes

2.51.4 (2023-03-15)

Bug Fixes

2.51.3 (2023-03-01)

Bug Fixes

2.51.2 (2023-02-27)

Bug Fixes

2.51.1 (2023-02-25)

Bug Fixes

  • transition delay of the background colors on input, select and textarea (#1606) (cc16946)

2.51.0 (2023-02-22)

Features

  • Add type definitions for the package
  • Add new tab-disabled class name for visually disabling a tab item
  • Add border radius to all tabs in tabs-boxed (not just the active tab)

Bug Fixes

2.50.2 (2023-02-20)

Bug Fixes

2.50.1 (2023-02-14)

Bug Fixes

2.50.0 (2023-02-01)

Bug Fixes

2.49.0 (2023-01-25)

Bug Fixes

2.48.0 (2023-01-25)

Features

  • textarea now has xs, sm, md and lg sizes: #1462

Bug Fixes

  • A tooltip without a data-tip attribute will not show an empty tooltip anymore #1501

  • Fix bordered menu entry on sub menus #1536

2.47.1 (2023-01-25)

2.47.0 (2023-01-16)

Features

  • More precise Hex to HSL conversion .Now HSL values round to 5 decimal places instead of 0 (36d27f0)

Bug Fixes

  • docs: Bordered menu item preview has incorrect class (#1505) (e2857f7)
  • docs: typos in the Portuguese translation (#1482) (763726c)
  • docs: update and improve japanese translation (#1510) (4fbba93)

2.46.1 (2023-01-02)

2.46.0 (2022-12-20)

Bug Fixes

2.45.0 (2022-12-15)

Bug Fixes

2.44.0 (2022-12-15)

Bug Fixes

2.43.2 (2022-12-12)

2.43.1 (2022-12-12)

Bug Fixes

2.43.0 (2022-12-09)

Bug Fixes

2.42.1 (2022-11-24)

Bug Fixes

2.42.0 (2022-11-23)

Features

Bug Fixes

2.41.0 (2022-11-16)

Features

  • Disabled toggle now looks different from unchecked toggle

Bug Fixes

2.40.1 (2022-11-14)

Bug Fixes

  • border radius of file input on Safari (f938fe3)

2.40.0 (2022-11-14)

Bug Fixes

Features

  • Bottom navigation now respects the iOS safe-area

2.39.1 (2022-11-11)

Bug Fixes

2.39.0 (2022-11-09)

Bug Fixes

2.38.1 (2022-11-05)

Bug Fixes

2.38.0 (2022-11-01)

Features

  • Card no longer has overflow: hidden. Instead, the figure will adapt the card border radius, fix: #1175 (10786e6)

Bug Fixes

2.37.0 (2022-10-31)

Bug Fixes

2.36.1 (2022-10-29)

Bug Fixes

2.36.0 (2022-10-29)

Features

2.35.0 (2022-10-29)

Features

Add the following color variants

  • success
  • warning
  • info
  • error

for the following components:

  • range
  • toggle
  • radio
  • checkbox

2.34.1 (2022-10-29)

Bug Fixes

2.34.0 (2022-10-29)

Bug Fixes

2.33.0 (2022-10-20)

Bug Fixes

2.32.0 (2022-10-20)

Bug Fixes

2.31.0 (2022-09-21)

Bug Fixes

2.30.0 (2022-09-21)

2.29.0 (2022-09-20)

Bug Fixes

  • menu width and menu item shrink issue (f57942e)

2.28.0 (2022-09-16)

Bug Fixes

2.27.0 (2022-09-10)

Features

  • btn-group-horizontal and btn-group-vertical classes are now responsive (f27340b)

2.26.0 (2022-09-10)

Features

  • allow utility classes to change padding and min-height for collapse (e0fa734)

Bug Fixes

2.25.0 (2022-09-05)

Features

  • 70% smaller size for mask styles

Bug Fixes

  • corrected incorrect jsx attribute on drawer and modal components (#1095) (77506ca)

Sponsors

Your logo here

Support daisyUI by becoming a sponsor

3 slots available

Hello!

This modal works with a hidden checkbox!

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!