Suggestions, feedback and ideas for daisyUI v5 beta

[saadeghi]

Hello and welcome 💚

daisyUI 5 is in development [v5 branch]

• There's no docs or changelog yet Release notes, Changelogs
• Some components are not ready
• There are many bugs and any alpha beta version may break things
• If you use it in production a baby dolphin will die get sick

Try it

1. You can try this Tailwind Play link which includes a big dump of components

2. Or you can try the new full.css daisyui.css or the new chunks.css!

3. Or if you're brave enough to try Tailwind CSS 4 beta + daisyUI 5 alpha beta,
   Install Tailwind CSS 4 alphabeta and then install daisyUI alpha beta

   npm i -D daisyui@beta
   

   Your CSS file:

   @import "tailwindcss";
   @plugin "daisyui";

   Use options

   @plugin "daisyui" {
     logs: true;
     root: ":root";
     include: button, badge, input, card;
     exclude: badge;
     themes: light --default, dark --prefersdark, cupcake;
   }

   Add a custom theme

   @plugin "daisyui/theme" {
     name: "my-theme";
     default: false;
     prefersdark: false;
     color-scheme: light;
     --color-base-100: oklch(98% 0.02 240);
     --color-base-200: oklch(95% 0.03 240);
     --color-base-300: oklch(92% 0.04 240);
     --color-base-content: oklch(20% 0.05 240);
   
     --color-primary: oklch(55% 0.3 240);
     --color-primary-content: oklch(98% 0.01 240);
   
     --color-secondary: oklch(70% 0.25 200);
     --color-secondary-content: oklch(98% 0.01 200);
   
     --color-accent: oklch(65% 0.25 160);
     --color-accent-content: oklch(98% 0.01 160);
   
     --color-neutral: oklch(50% 0.05 240);
     --color-neutral-content: oklch(98% 0.01 240);
   
     --color-info: oklch(70% 0.2 220);
     --color-info-content: oklch(98% 0.01 220);
   
     --color-success: oklch(65% 0.25 140);
     --color-success-content: oklch(98% 0.01 140);
   
     --color-warning: oklch(80% 0.25 80);
     --color-warning-content: oklch(20% 0.05 80);
   
     --color-error: oklch(65% 0.3 30);
     --color-error-content: oklch(98% 0.01 30);
   
     --radius-selector: 1rem;
     --radius-field: 0.5rem;
     --radius-box: 2rem;
   
     --size-selector: 0.25rem;
     --size-field: 0.25rem;
   
     --border: 1px;
     
     --depth: 0;
     --noise: 0;
   }

Feedbacks needed

Here's how you can help:

• Feedback: What do you like/dislike about v5 so far?
• Suggestions: Any features or improvements you'd like to see in the stable version of daisyUI 5?
• Bug Reports: Found a new bug in v5 alpha beta? Let me know.

Put your comments 👇

[Tekechen]

I love DaisyUI. I suggest a date picker.

[saadeghi]

https://v5.daisyui.com/components/calendar/

[brendoarrudaa]

As soon as it is officially launched, I will implement it in my Saas

[condemil]

@saadeghi on the calendar page the first example have white arrows and date picker example (the one with dropdown) have black arrows

[rsessine]

@saadeghi Any plans on making navigation possible ? To change month and years quickly by clicking on it.

[saadeghi]

@rsessine daisyUI is the style. The functionality comes from each of 3 available calendar packages and you can check each package from their repo.

[vipincode]

Hey there , Date and Calendar most important for development, I also not find multi select, I see these in future

[tianjos]

Hi! I would like to see progress with percentage feedback

[saadeghi]

Like a tooltip, showing a number?

[tianjos]

yep! seems great

[saadeghi]

You would need some JS to get the value of range input and show it in the tooltip:
https://codepen.io/saadeghi/pen/LYwaEzV?editors=1000

[Ookamini95]

A context menu (https://primeng.org/contextmenu) would be very pog

[Avaray]

That is pretty interesting

[aparajita]

DaisyUI is only CSS, and a context menu needs Javascript to intercept the contextmenu event. From there you can display a standard daisyUI menu, no special component needed.

[xcaptain]

Need this, preline UI and flyonui already supported contextmenu

[saadeghi]

@xcaptain
I think there's a misunderstanding…

• daisyUI is a CSS library.
• Context menu is a JS event
• Preline is JS. It adds a 309kb JS file to your page.
• Flyon UI is daisyUI + Preline source codes combined.

Here's an example of using daisyUI menu with JS oncontextmenu event:
https://svelte.dev/playground/bb1295931880414a9448901e6548775a?version=5.17.3

[xcaptain]

Thanks, your code snippet is very helpful to me!

[mathlouly]

I suggest Select with search, for example.

I made the gif component using input + dropdown from DaisyUI S2.

[Ookamini95]

The broser has some nice features supporting this

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

[cachesdev]

datalist cannot be styled.

[mathlouly]

Well, for those who need to use select search without waiting for the new version of DaisyUI, I managed to make one that, in my opinion, was good, but using hook forms.

Use

const { register, handleSubmit, formState: { errors }, watch } = useForm();

<SelectSearch
    className="w-full"
    name="country"
    placeholder="Busque pelo país"
    contentText="Digite pelo menos 3 caracteres para buscar"
    inputChange={handleSearchCountry}
    loading={loading}
    options={countries?.map((country) => ({ label: country.native, value: country.id }))}
    register={register("country", {
        required: { value: true, message: "O país é obrigatório" }
    })}
    errors={errors}
/>

Component

import { Search } from "lucide-react";
import React, { useRef, useState } from "react";
import { FieldErrors, FieldValues, UseFormRegisterReturn } from "react-hook-form";

export type Option = {
    label: string;
    value: any;
};

export type SelectSearchProps = {
    name: string;
    className?: string;
    placeholder?: string;
    contentText?: string;
    inputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    options?: Option[];
    loading?: boolean;
    register?: UseFormRegisterReturn<string>;
    errors?: FieldErrors<FieldValues>;
};

export const SelectSearch: React.FC<SelectSearchProps> = ({ name, ...props }) => {
    const { className, placeholder, contentText, inputChange, options, loading, register, errors } = props;

    const divRef = useRef<HTMLDivElement>(null);
    const inputShowRef = useRef<HTMLInputElement>(null);

    const [ required ] = useState<boolean>(register?.required || false);

    const isError = errors && register && errors[register.name]

    function handleSelectItem(option: Option) {
        if (inputShowRef.current) inputShowRef.current!.value = option.label;
        removeFocusDiv();
        register?.onChange({ target: { name, value: option.value } });
    }

    function handleBlur(e: any) {
        const value = e.target.value;

        if (options?.find((option) => option.label === value)) {
            return;
        }
        if (inputShowRef.current) {
            inputShowRef.current.value = "";
            register?.onChange({ target: { name, value: "" } });
        }
    }

    function handleOnChange(e: any) {
        const value = e.target.value;
        inputChange && inputChange(value);
    }

    function removeFocusDiv() {
        divRef.current?.focus();
        divRef.current?.blur();
    }

    return (
        <>
            <div tabIndex={-1} className="dropdown" ref={divRef}>
                <label className={`input input-bordered flex items-center gap-2 ${className} ${isError ? "input-error" : "input-primary"}`} >
                    <input ref={inputShowRef} type="text" className="grow" placeholder={placeholder} onChange={handleOnChange} onBlur={handleBlur} required={required} />
                    <select className="hidden" {...register}>
                        {
                            options?.map((option, index) =>
                                <option key={index} value={option.value}>
                                    {option.label}
                                </option>
                            )
                        }
                    </select>
                    <Search size={22} className="text-base" />
                </label>
                <ul
                    tabIndex={0}
                    className="dropdown-content dropdown-open z-10 menu p-2 shadow bg-base-100 rounded-box w-full"
                >
                    {
                        loading && <span className="loading loading-spinner loading-md text-primary mx-auto py-4"></span>
                    }

                    {
                        !loading && options && options?.map((option, index) =>
                            <li key={index} onClick={() => handleSelectItem(option)}>
                                <a>
                                    {option.label}
                                </a>
                            </li>
                        )
                    }

                    {
                        !loading && !options?.length &&
                        <li className="text-center text-sm py-6">
                            { contentText }
                        </li>
                    }
                </ul>
            </div>
            {
                isError &&
                <span className="w-full text-start text-error text-sm"> {`${errors[register.name]?.message}`} </span>
            }
        </>
    )
}

[blackfyre]

The broser has some nice features supporting this

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Datalists are nice, but I need ID/label pairs which doesn't work sadly.

[sillvva]

I built one using Svelte, sveltekit-superforms, and the bits-ui combobox component. bits-ui is shadcn-svelte minus the styles. I was using daisyui and tweaked the example using daisyui's group, button, input, and dropdown styles.

https://github.com/sillvva/ddal-svelte/blob/main/src/lib/components/forms/Combobox.svelte

<Control class="col-span-12 sm:col-span-6">
  <Combobox
    {superform}
    label="DM Name"
    valueField="dm.id"
    inputField="dm.name"
    values={data.dms.map((dm) => ({
      value: dm.id,
      label: dm.name,
      itemLabel: dm.name + (dm.uid === data.user.id ? ` (Me)` : "") + (dm.DCI ? ` (${dm.DCI})` : "")
    })) || []}
    allowCustom
    onselect={({ selected }) => {
      const id = selected?.value;
      const name = selected?.label;
      $form.dm = data.dms.find((dm) => dm.id === id) || (name ? { ...$form.dm, name } : defaultDM(data.user.id));
    }}
    clearable
    onclear={() => ($form.dm = defaultDM(data.user.id))}
    link={$form.dm.id ? `/dms/${$form.dm.id}` : ""}
    placeholder={data.dms.find((dm) => dm.uid === data.user.id)?.name || data.user.name}
  />
</Control>

[jordan1900]

Would love to see a way to control state for inputs like checkbox, radio and toggle with a class, in addition to props (similar to btn-active). When I apply Daisy styles to headless component like React Aria the styled implementation doesn't always work.

So for example, something like this would be super handy for me to control props and styling with.

<Checkbox className="checkbox checkbox-active">

[saadeghi]

That's an issue React Aria should fix.

daisyUI works with aria-checked="true" correctly, which is the right aria attribute for a checkbox.

React Aria checkbox is not a checkbox.
It should be either a checkbox <input> tag or it should have role="checkbox" with aria-checked="true", but they are using divs with data-selected="true" which is just a custom data attribute, not an aria attribute.

[Avaray]

The new "shiny" effect on buttons should be optional, not used as default.
It reminds me buttons made with Macromedia Flash in 00s.

[Avaray]

I'm improving the design ✅ This is not final

I'm not saying that is bad. It just does not fit to flat style of daisyUI, that I love ❤️

I believe CSS styles are like fashion trends—they come back around every 10-20 years :P
And you might be right that flat design will be over soon (it that's the reason why you went for 3d)

[asquithea]

btn-shiny anyone :-D

In all seriousness it would be great 🙏 to easily keep the same visual appearance for existing apps. Predictability and consistency is an under-rated feature (and avoids me being told off by my company's design team)!

Many thanks for all that you do - DaisyUI is genuinely impressive.

[notramo]

I also observed this shiny effect on checkboxes and radio buttons. It doesn't look modern. Sure, the trend may come back, but I want to build apps that look good according to current trends, not the trends 15 years earlier or later from today. DaisyUI 4 styles are optimal for this.

[notramo]

Here is a CSS snippet to remove the shiny effect from all components that currently have it.

@layer utilities {
  .alert,
  .badge,
  .btn,
  .checkbox:checked,
  .input,
  .radio:checked::before,
  .radio [aria-checked]::before,
  .select,
  .select:focus,
  .toggle::after {
    --gloss: 0;
  }
}

You can craft your own .btn-shiny, .badge-shiny, .alert-shiny, etc. utilities that set --gloss to a value between 0 and 1 (0 is flat, 1 is shiny).
Here's an example of a shiny button and badge. The &.btn and &.badge selectors are required for more specificity, so that it overrides the above reset.

@utility btn-shiny {
  &.btn {
    --gloss: 1;
  }
}

@utility badge-shiny {
  &.badge {
    --gloss: 1;
  }
}

Please note that for many components, the shiny effect uses an inset CSS shadow, so if you set a shadow on the element, it removes the shiny effect, no matter what --gloss value was set (this happens even without the workaround, e.g. setting shadow-xl on the component).

I will update these snippets to keep up with recent changes in DaisyUI.

[saadeghi]

It's easier even.

You can set --gloss: 0 for a theme, to control it for all components.

See Effects section here
https://v5.daisyui.com/theme-generator/

And also the CSS variable in the generated CSS code.

It's a new feature. I'm writing docs for it soon.

[Sztacho]

I will suggest the date picker with range date definition. Example you can select only the date from range.

[saadeghi]

support flatpickr as well (if possible)!

I will add in daisyUI 5.1 🫡

[aparajita]

support flatpickr as well (if possible)!

I will add in daisyUI 5.1 🫡

Once it's implemented I'll send $$ your way. Already signed up for a monthly contribution, plan to use it heavily in the next project.

[saadeghi]

@aparajita Thanks for the support 💚

[aparajita]

Hey @saadeghi, I took a closer look at cally and it will suffice for my needs, no need to support flatpickr.

[saadeghi]

@aparajita thanks for the update. Yeah, Cally is new but it's really well made 👍

[Ookamini95]

Animating progress and radial progress bar.

For radial progress bar I've managed to upgrade my previous attempt on the problem #3206 by using some javascript (edit: sorry for angular notation)

html

<div class="radial-progress animate-value" [style]="styled" role="progressbar">70%</div>

css

@property --_value {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.animate-value {
    transition: --_value 1s ease-out;
}

ts

  styled = signal('--_value:10;--value:var(--_value);') // initial value
  setTimeout(() => { this.styled.set( '--_value:70;--value:var(--_value);') } , 5000) // transition after 5s

[Sztacho]

Working with table I see a little problem with the table-zebra class, I have a bg-color set to the specifi case where I need to change a bg color for entry. Maybe you can add a important tag for bg color?

[blackfyre]

Are you guys planning to add Combo boxes? (select + text field search)

[mathlouly]

If u need #3246 (reply in thread)

[bigboggy]

Ability to extend the colors, base-400, base-500 etc would be great

[FlorSanders]

Same with using the standard tailwind colors in the buttons and other components.
Being able to do <button class="btn btn-blue-200"></button> and it using the tailwind colors would be awesome.

[PaulHaze]

I've been able to extend the base colours fine by using variables and then adding it the tailwind config. For example, in my custom 'light' theme I have this code in the daisyui block:

          primary: '#5155c3',
          secondary: '#9b9cf7',
          accent: '#bd531e',
          neutral: '#929293',
          'base-100': 'oklch(99.72% 0.0028 84.56)',
          'base-200': 'oklch(97.82% 0.0034 247.86)',
          'base-300': 'oklch(95.15% 0.0046 258.32)',
          '--base-400': '90.94% 0.0058 264.53',

then I just 'extend' the base-400 into the tailwind colours (along with my other custom colours):

    extend: {
      colors: {
        'primary-muted': 'oklch(var(--primary-muted) / <alpha-value>)',
        base: {
          '400': 'oklch(var(--base-400) / <alpha-value>)',
        },
        content: {
          '200': 'oklch(var(--content-200) / <alpha-value>)',
          '300': 'oklch(var(--content-300) / <alpha-value>)',
        },
        light: 'oklch(var(--light) / <alpha-value>)',
        muted: 'oklch(var(--muted) / <alpha-value>)',
      },
}

Using this approach you can put as many extra base numbers as you want (-500,-600,-700...).

They are used in the same way all the other colours are used: bg-base-400, text-content-200, bg-muted/80 e.t.c.

[saadeghi]

This will be even easier in daisyUI 5

[firdaus-aziz]

1. Date picker and time picker (as @Tekechen, @vipincode, and @Sztacho already suggested)
2. Responsive table (table in widescreen, then card in table/phone). Example https://vanillaframework.io/docs/base/tables#responsive

I don't think VanillaFramework use any JS to achieve this. I am kind of assuming it's feasible for DaisyUI too.

Lastly, thank you so much for all your hard work and sacrifices in creating this for us.

[brpowell]

Just wanted to say thank you so much for this incredible project. Looking forward to the animated progress components ❤️

[Avaray]

Today I discovered animated radial progress. Feels very nice imo.
Progress bars should have the same speed of animation.

[BakirGracic]

is this expected behaviour for breadcrumbs component in "daisyui": "^5.0.0-beta.8"?

beginning of component gets clipped, not visible on scroll. end is visible fully. removing margins doesn't change anything...

code example (jsx from next.js app)

return (
	<div className='breadcrumbs mx-4 my-6 text-sm'>
		<ul className='justify-center'>
			<li>
				<Link href='/'>
					<HomeIcon className='size-4' />
					{t('homepage')}
				</Link>
			</li>
			{links.map(({ href, label }, index) => (
				<li key={index}>
					{href === null ? (
						<p className='text-primary'>
							<GlobeAltIcon className='size-4' />
							{label}
						</p>
					) : (
						<Link href={href}>
							<GlobeAltIcon className='size-4' />
							{label}
						</Link>
					)}
				</li>
			))}
		</ul>
	</div>
);

[BakirGracic]

additional question here so i dont publish another comment:

have you thought about adding styles for custom scrollabrs?

[saadeghi]

code example (jsx from next.js app)

Can you share the output HTML from the browser? You can share it here

have you thought about adding styles for custom scrollabrs?

You can change scrollbar color using scrollbar-color

:root{
  scrollbar-color: blue yellow;
}

Or [scrollbar-color:blue_yellow] class name.

Don't use ::-webkit-scrollbar
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

[BakirGracic]

Can you share the output HTML from the browser?

Here's the rendered HTML from Elements in DevTools @saadeghi

https://play.tailwindcss.com/wQ1PdQb6U6

Please don't tell me I messed up on my end with css 🫣

You can change scrollbar color using scrollbar-color

I've researched the matter about scrollbars. I don't see the need for DaisyUI scrollbar abstractions/components since the scrollbar API is poor, in my understanding. Thanks anyway!

[saadeghi]

https://play.tailwindcss.com/wQ1PdQb6U6

Just remove the justify-center.
https://play.tailwindcss.com/nxOjnaP3yG

[eokic]

@saadeghi why do you modify the --root-bg when certain elements like drawers are open? You already have overlay elements as far as I can see. This just introduces unnecessary complexity, e.g. right now I'm making a theme switcher drawer, and the data-theme changes cannot be previewed correctly/in realtime because of:

:where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)) {
  --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
}

[eokic]

Thank you for clarifying! As I generally try to stay with the framework as much as possible, I'd prefer not to remove these (and reinvent the wheel) unless forced to. As you have deeper insight in the inner workings here, do you foresee a fix/change in the near future which could alleviate this issue or is it an inescapable price to pay for the gutter compensation?

[saadeghi]

Is there a delay for color change?
Which browser? Can you share a short video?

[eokic]

Sure thing, macOS, Chrome 133.0.6943.99

CleanShot.2025-02-18.at.11.48.07.mp4

Let me know if you need any more info. I was unable to add JS quickly to play.tailwind to confirm.

[saadeghi]

@eokic Make sure data-theme is in <html> tag (not <body> or <div> or etc)

[eokic]

Oh, interesting, thank you! It definitely does solve my issue on this project as I can remove the company-wide, standard scope/prefix completely from the build. Apologies for not mentioning it earlier as this was so normalized, I completely forgot it was even a thing.

But just to throw it out there in case you find the info useful, we often do incremental refactors on larger codebases so all of our builds are scoped under some prefix (specifically with postcss-prefixwrap as we don't want to write utilities like prefix-p2 etc.). This means nothing would be applied for <html class='prefix' data-theme>...; would only work for <html class='prefix'><body data-theme>.... A more realistic usecase though would be that both the prefix and the data-theme are applied somewhere deeper in the hierarchy.

[alxNoComment]

"daisyui": "^5.0.0-beta.6",
wrong color for checkbox with checked (active)
<input type="checkbox" class="btn btn-secondary btn-xs" :aria-label="val" :value="val" v-model="selected" />

No checked - all okey:

checked - wrong color (from primary)

[saadeghi]

It becomes primary when checked. Which color do you expect in this situation? If it stays secondary, it wouldn't be visible 🤔

[alxNoComment]

expected "btn-active"

btn-active btn-secondary

<button class="btn btn-active btn-secondary">Secondary</button>

[alxNoComment]

"daisyui": "^5.0.0-beta.6",

should it work like this? The select on the left side adds a barely visible outline when use with label

                <label class="select w-fit">
                    <span class="label">Decade</span>
                    <select class="select" v-model="filter.decade">
                        <option :value="null">ALL</option>
                    </select>
                </label>

if use without class "select" on select tag then different sizes

                <label class="select w-fit">
                    <span class="label">Decade</span>
                    <select class="" v-model="filter.decade">
                        <option :value="null">ALL</option>
                    </select>
                </label>

[saadeghi]

That's an issue indeed. Thnaks.
will be fixed in the next beta (soon)

[vish404]

This might already be possible to do, but here you go:

Can the rating component modified to accept negative ratings too?

Something like: -2, -1 0, 1, 2.

The color starting will be from 0.

[vish404]

Something like the below. with our icons. it could be the stars we have. Screenshots are from google images.

[saadeghi]

Here's an example:
https://play.tailwindcss.com/ilx1ifhFcO

You can use custom image/icon.
You can set any number in value.

Let me know if you have a question.

[vish404]

Thanks for the code.

Is there a way to make the selection go left from center.

-5,-4,-3, -2, -1, 0, 1, 2, 3, 4, 5

in the above example, when i select -3, the selection should highlight 0 to -3.

[saadeghi]

I see, it only highlights the previous ones (not next ones)
You can write some custom CSS for that. Here's the style

[vish404]

Thank you, i will look into that.

[Megaemce]

With the beta-8 suddenly I start getting error message on compilation. I use the latest tailwind + tailwind/postcss - 4.0.8

[saadeghi]

I need a reproduction link so I can debug this

[millette]

@Megaemce are you also using cssnano or autoprefixer postcss plugins?

[Megaemce]

@Megaemce are you also using cssnano or autoprefixer postcss plugins?

not at all.

I need a reproduction link so I can debug this

The thing is... it works in production, and was working last week. Just came up from holiday and the stuff is not working in dev... 🤔

[saadeghi]

There is a bug about this in Tailwind CSS 4.0.7 and 4.0.8.
I reported it, it is fixed and merged already. So it is expected to be fixed in Tailwind CSS 4.0.9 soon.

[Megaemce]

If there will ever be internet award for favourite open source dev I will vote for you! Thx man so much! ❤️

[alxNoComment]

What is the way to use tabs[input_radio] with icons in daisyui?

div.tabs{
<span><i :class="fa fa-icno"></i><input type="radio" name="my_tabs_1" class="tab" aria-label="" /></span>
}

I will get this with wrong underline:

if i add tab class to <span>
I will get this:

if wrapp to label and remove class "tab" on input
I will get this:
<label class="tab">

Expected result:

[saadeghi]

It's impossible with the current format input, tabcontent, input, tabcontent….
To allow icons, we need to change the current format and add another div between them input, div, tabcontent, input, div, tabcontent… to include text or icon etc.
I will work on the idea. It won't be in 5.0 but maybe 5.1 or 5.2…

[alxNoComment]

i think about this allow wrapp to label as html, But it's as if the styles are not working then click on
https://play.tailwindcss.com/lAMKhWVhOA

<div class="tabs tabs-border">
  
  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 1" />
  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 2" checked="checked" />

  <label class="tab">
    click 🙄 here before work too
    <input type="radio" checked="checked" name="my_tabs_1" class="hidden" />
    click here after work 🙄 to0 
  </label>

</div>

I thought it was like the right way. The logic that basic HTML allows. But DaisyUI blocks this method.

[saadeghi]

@alxNoComment I think we can do that 👍
I'm working on it…

[saadeghi]

Thanks @alxNoComment for the idea.
https://daisyui.com/components/tab/#radio-tabs-lift-with-icons--tab-content

[Megaemce]

YEAH!

[Mashiane]

Hi there

The CDN 9 version is listed but link is broken, can you please advise?

https://cdn.jsdelivr.net/npm/[email protected]/daisyui.css

[saadeghi]

Will be released today. I deployed the site with the new version early 😅

[mcullifer]

Should the soft variants for buttons, badges, etc have the bg and text colors inverted on light theme? Or maybe have their background a little bit darker? Maybe it's just me but they seem hard to see against the light backgrounds.

[saadeghi]

• It depends on the theme colors
• You shouldn't use badge-neutral badge-soft on top of base-100 color. It's not readable as you can see in the screenshot. but it is expected behavior. neutral color is always dark. badge-neutral badge-soft exists to be used on places that is readable. For example on top of an image or on top of bg-info, etc…
• soft variants are not guaranteed to look readable with any color on any background color because it uses same text color for background with less opacity. For example if primary is a dark purple, base-100 is black, badge-primary badge-soft on bg-base-100 won't be readable but that's not where you should use it anyway. Instead use it on a background with enough contrast.
• All color pairs of all themes pass WCAG minimum contrast but all colors on base-100 are not a color pair. base-content on base-100 is a pair.
• we can't "invert" colors automatically because we don't know what color you're choosing. daisyUI is a build-time dependency. Your colors are CSS variables which can change at runtime.

[ErekleModebadze]

Hello, exclude: rootscrollgutter, rootcolor; doesn't work if
@plugin "daisyui" { themes: light --default; } applied too, i mean it works alone but not when only light theme is applied like this

@plugin "daisyui" {
    themes: light --default;
    exclude: rootscrollgutter, rootcolor;
}

I am using it in vue js

[Mashiane]

How does one do this using CDN version?

exclude: rootscrollgutter, rootcolor;

[saadeghi]

@ErekleModebadze it works: https://play.tailwindcss.com/3nm3fk2X4g?file=css
If it's not working for you please share a minimal reproduction link.

@Mashiane With CDN, there's no build step. so you can't use @plugin. But you can customize the CDN file here: https://v5.daisyui.com/docs/cdn/

[ErekleModebadze]

Yeah, I checked it. now it works. Thanks!

[vuvandong]

Add class no-animation from daisy ui v4, please!

[saadeghi]

🎉 daisyUI 5.0 is ready!!
Thank you all for the feedbacks, bug reports, contributions and PRs 💚

Video	https://www.youtube.com/watch?v=bYznFmzL820
Release notes	https://daisyui.com/docs/v5/
Upgrade guide	https://daisyui.com/docs/upgrade/
Changelog	https://daisyui.com/docs/changelog/
Install guide for frameworks	https://daisyui.com/docs/install/

[yoshi6jp]

Congratulations daisyUI 5.0 release! ㊗️
A library for React server component has been released at the same time.
Please use it if you like.

• Storybook
• rsc-daisyUI

[CoderJo-Pro]

Can we explain a little bit in the upgrade doc?

@import "tailwindcss";
@plugin "daisyui";

I was scared by the new import method, but finally accepted daisy5 after learning it's the way of how tailwindcss@5 works.

[saadeghi]

It's explained here
https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives

[CoderJo-Pro]

Yes, you're exactly correct. Just a mention of frustration that those who first get into v5 might have, like me.

[conman124]

A couple pieces of feedback after starting to migrate to v5:

1. The docs need an example of radio buttons + a label. While I can hack something together without a problem, it's unclear to me how I am "supposed" to add labels to my radio buttons.
2. Along that same line, I'm struggling to understand what the difference between .fieldset-label and .label is and when I should use one vs the other. For example, in the upgrade guide about the removal of .form-control (https://daisyui.com/docs/upgrade/#other-removals) it says to use .label inside a fieldset, but that seems sort of strange. Frankly, I'm not even sure if .label and .fieldset-label are intentionally different as the difference between them is very small.
3. This is not something that is likely to change so late in the game, but I personally am not a fan of how small the labels are, especially when paired with checkboxes or radio buttons, or how light the label text is. This is not such a big deal, as I'm sure I can tweak the styles in my own css.

[thiagomajesk]

@saadeghi I ended up addressing the fieldset + label as a documentation issue because I think we might solve this with examples and maybe (maybe), softly deprecate the overlapping functionality in the next minor version. Let me know if you want to keep this discussion contained in a specific place: #3573 👍

[eokic]

Is it possible to configure where/on which @layer DaisyUI components will be built? I don't like that it's on the same layer as utility classes as this can create specificity conflicts. Would much rather set it on a custom, intermediate level below utilities.

[saadeghi]

components should be in in components layer but Tailwind puts them in utilities layer.
Please upvote this issue tailwindlabs/tailwindcss#15045 and hopefully this will be fixed.