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 👇

[Megaemce]

It would be nice to know what the changes are, so we know what could be tested. Otherwise it's just shots in the dark.

[saadeghi]

Yes of course. I will write the full changelog as soon as I can.
Right now, for alpha version things are constantly changing so a changelog can't be the source of truth unless I constantly deprecate update the changelog according to the latest commit.

The commits are here:
https://github.com/saadeghi/daisyui/commits/v5 but the changes ar enot finalized until the beta release.

Also regardless of v5 changes, I would like to receive feedbacks and ideas about the the existing things from v4 that I can improve in v5.

[Tekechen]

I love DaisyUI. I suggest a date picker.

[bigboggy]

absolutely, datepicker is the hardest component though to do

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

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

[notramo]

A .status-pulse modifier would be useful.

Here is a proof of concept. I did not know how to center properly, probarly it has to do something with the borders or padding.

@keyframes statusPulse {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 0;
    transform: var(--status-pulse-base-transform) scale(2.2);
  }
}

@utility status-pulse {
  position: relative;
  /* workaround: not exact 50% because of border */
  --status-pulse-base-transform: translateX(-50%) translateY(-55%);
  &::after {
    content: "";
    display: block;
    border-radius: inherit;
    background-color: inherit;

    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: var(--status-pulse-base-transform);

    animation-name: statusPulse;
    animation-duration: 1200ms;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }
}

Alternatively, a child element could be used for it, but it requires changes to the above styles. It has the advantage of being able to specify a different color or z-index. However, the main .status should use ::after in this case, to allow modifying z-index of the pulse.

<div class="status status-primary">
  <div class="status-pulse status-error"></div>
</div>

[saadeghi]

Yeah could be useful, but Tailwind already has such animation: animate-ping
So the only challenge would be putting them on top of each other:
https://play.tailwindcss.com/VupScTpIxG

[cananda]

I would like to request for a pinInput component for one time OTP input. The length should be customisable from 4 or 8 number length.

Example: https://mantine.dev/core/pin-input/

[saadeghi]

This can't be done with CSS unfortunately. With CSS only we can use one input, which looks like this:
https://play.tailwindcss.com/KaCcuUVkdD

To have multiple inputs, you need JS to move back/forward each time an input is filled or deleted. then you need JS again to merge the strings together.
The link in your example is using this much JS to make it work. PinInput.mjs alone is ~50kb even after treeshaking.

You can use a code like this:
https://codepen.io/saadeghi/pen/OPLjNBa?editors=1101
and then style the inputs with daisyUI or anything.
The link is Alpine.js. use AI to convert it for your own framework

[saadeghi]

Hey chat, Release notes draft and Changelog draft are here.
Also docs is ready (Let me know if you found an issue)
Latest version is [email protected].
I need more people to test it so that we can fix as many bugs as possible before the beta version is released. 💚

[saadeghi]

for example you want to override --color-primary for all themes, so you do this:

@theme {
    --color-primary: oklch(59% 0.3096 275.75);
}

I see that the change is applied to the dark theme, but not to the light theme.

To use @theme, disable the default first (Because otherwise themes: light --default, dark --prefersdark is applying light/dark by default)

@plugin "daisyui" {
-  themes: light --default, dark --prefersdark;
+  themes: false;
}

Now you can put whatever in @theme:

@theme {
  --color-primary: oklch(55% 0.3 240);
  /* … the rest */
}

Example: https://play.tailwindcss.com/LQx3NyDVDJ?file=css

But I suggest using @plugin "daisyui/theme" { for daisyUI instead of @theme {.
Because daisyUI has no control over how @theme works.
With @plugin "daisyui/theme" we can also control if theme should be default or prefers-dark, or add a name, or make it work with theme-controller inputs. With @plugin "daisyui/theme" we can add multiple themes, which is not possible with @theme

@plugin "daisyui/theme" {
  /*theme 1 colors*/
}
@plugin "daisyui/theme" {
  /*theme 2 colors*/
}
@plugin "daisyui/theme" {
  /*theme 3 colors*/
}

Docs: https://v5.daisyui.com/docs/themes/#-2

maybe it's possible to have a flag to disable default (light) and prefers-color-scheme (dark) themes for the cases when the data-theme is always present on the html tag

Yes. It is possible.
Default themes config is:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

If you remove the --default and --prefersdark flags, there will be only 2 themes, only available using data-theme="light" or data-theme="dark":

@plugin "daisyui" {
  themes: light, dark;
}

https://v5.daisyui.com/docs/themes/

[condemil]

Ahh I somehow missed new info in the docs/themes section. After I did themes: false; in plugin config I ended up with only one copy of variables for both light and dark themes in the CSS bundle, exactly what I needed. Thank you for such a detailed explanation!

[condemil]

Maybe it worth mentioning in changelog the migration path from label.form-control to fieldset.fieldset?

[condemil]

validator: maybe it's better to wrap elements for validator as validator-hint triggers for several elements on the same level

<input type="input" class="input validator" placeholder="Username" minlength="3" maxlength="30">
<p class="validator-hint">Must be 3 to 30 characters</p>

<input type="number" class="input validator" required placeholder="Type a number between 1 to 10" min="1" max="10">
<p class="validator-hint">Must be between be 1 to 10</p>

[saadeghi]

@condemil will be fixed in next version. No need for a wrapper tho. I can handle it with selectors.

[stephannv]

@saadeghi I like the new visuals for form label/hints, eg.

But I didn't like the usage of fieldset+legend to achieve this. I think it should using divs instead fieldsets, labels instead legends and span instead label. For example, clicking on legend doesn't focus on input, and using multiple fieldsets for individual inputs doesn't feel right for me.

BTW, thanks for your (and the contributors) job on DaisyUI, it is my favorite css framework for some years.

[saadeghi]

Thanks!

Fieldset+legend is not a replacement for <label> tag.
You can still use <label class="label">. Example:
https://play.tailwindcss.com/xHBO3IggYu

Fieldset+legend is a way to contain one or more form elements together.

For example if I have a form for user register, I can put them all in a fieldset, I can write "Register" as legened. Then a label for each input.
For label, there are many ways to do it now, we can put the label on top, bottom, side or floating…

Let me know if you have a question.

[stephannv]

Nice @saadeghi, thanks for the example. I think the v5 docs led me to not understand that this could be done, because Label examples are focused on and floating labels, and the most of input docs use fieldset legend as input labels.

[saadeghi]

I will add more examples 👍

[printf83]

I’ve been testing the v5 alpha and noticed an issue with the scrollbar functionality. It behaves inconsistently under certain conditions:

If the page content exceeds the screen height, the scrollbar sometimes doesn't work.
To temporarily fix it, I have to resize my browser window to make it smaller, which seems to trigger the sidebar.
Then, closing the sidebar by clicking the background restores the scrollbar functionality.

The tricky part is that this issue is hard to reproduce consistently—it only happens sometimes, making it challenging to pinpoint the exact cause.

It feels like the sidebar state might be interfering with the scrollbar's behavior. I hope this feedback helps in identifying the issue. Let me know if you need more details or a specific test case.

[saadeghi]

Thanks for testing v5!

1. Which browser version?
2. Does this happen in v5.daisyui.com as well?
3. Can you share a minimal reproduction?

[printf83]

Browser

• Firefox 133.0.3 (latest)
• Chrome 131.0.6778.204 (latest)

OS:

• Fedora 41
• Android 14 (I can't reproduce the issue right now)

This issue does not occur on v5.daisyui.com.

When the bug happens, I try to inspect the page using Ctrl + Shift + I and find the following element:

<input id="drawer" type="checkbox" class="drawer-toggle">

If I rename the class drawer-toggle to something like drawer-toggle-x, the scrollbar reappears. When I rename the class back to drawer-toggle, the drawer works again. The scrollbar continues to work without issue at this time

However, if I navigate to another page using the drawer, sometimes the scrollbar disappears on the new page as well. Renaming the drawer-toggle class fixes the issue temporarily, but sometimes it happens again on other pages.

I can share the URL, username, and password for the test website in a private message or via email if needed.

[saadeghi]

hey, thanks for the link.
I think I see when this happens:
Resize browser to mobile size, open drawer, resize browser to big again: scrollbar is still locked.
Will be fixed in 5.0.0-alpha.59 tonight 👍

[printf83]

I think the problem is on my side. Sorry for bothering you about this issue. I just need to make sure the drawer-toggle is always unchecked every time I navigate to another page.

[saadeghi]

Fixed in 5.0.0-alpha.59 Now scrollbar would be locked only if sidebar is open as an overlay ✅

[aparajita]

Would like to see a range slider that:

• Is only the knob
• Allows more than one knob
• Can show content above

Like this:

[saadeghi]

I see, but I'm not asking how to style the range or what are all the possible pieces of this element that can be styled, because possibilities of design are infinite… 😅
I'm asking what do YOU need?
What is the specific customization you want to apply to this 👇

Currently radius, color, size and the depth effect are customizable from theme.

[aparajita]

Track customization: color, size, background. Definitely want to easily get only the thumb without the "shadow" to the left.

[saadeghi]

Thanks. I will add more options and more examples to docs 👍

[aparajita]

🙏

[saadeghi]

fixed in [email protected] ✅
These CSS variables are available in .range meaning you can change them using utility classes or from CSS file.

Variable
--range-bg	background color of the range slider thumb
--range-thumb	color of the range slider thumb
--range-thumb-size	size of the range slider thumb
--range-progress	color of the range slider progress
--range-fill	binary, whether to fill the range slider progress or not
--range-p	padding of the range slider thumb
--size	size of the range slider

[printf83]

Can we have shadow on btn btn-primary join-item?

<div data-theme="light" class="flex flex-col gap-3 p-3">
  <div>
    <button class="btn btn-primary">I have shadow</button>
    <button class="btn btn-success">Button</button>
  </div>

  <div>
    <div class="join">
      <button class="btn join-item btn-primary">My shadow gone</button>
      <button class="btn join-item btn-success">Button</button>
    </div>
  </div>

  <div>
    <div class="join shadow">
      <button class="btn join-item btn-primary">My shadow gone</button>
      <input class="input join-item" />
      <button class="btn join-item btn-success">Button</button>
    </div>
  </div>
</div>

[aparajita]

In the latest alpha, it looks like buttons do not have a shadow by default.

In the last example, the join does have a shadow, but because the white area shows it so clearly, it looks like the buttons do not have it. Change the shadow to shadow-2xl shadow-black and you'll see it.

[saadeghi]

fixed in [email protected] ✅

[printf83]

table inherit style from parent

<table class="table table-sm">
  <tr>
    <td>table-sm</td>
  </tr>
  <tr>
    <td>
      <table class="table table-lg">
        <tr>
          <td>table-lg should be table-lg</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>native table, should be native</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

[saadeghi]

Yes it inherits. What is your use case that you need nesting tables inside each other?

[printf83]

I think it should not inherit styles from the parent table. Only tables with the class table should have table-specific styles.

[printf83]

//can we have zebra list like table?
• Most played songs this week

<li className="list-row"> //can we have hover effect like table?
	<a href="#go to another page"> //can we have something like this?
		<div>
			<img
				className="size-10 rounded-box"
				src="..."
			/>
		</div>
		<div>
			<div>Dio Lupa</div>
			<div className="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
		</div>
	</a>
</li>

[saadeghi]

Yes, do it like <li><a class="list-row">.

Example:
https://play.tailwindcss.com/ZgA0o0f90v

There's no class name for zebra, but of course you can add bg colors.

[printf83]

I think only li.list-row elements have dividers right now.

[saadeghi]

I think only li.list-row elements have dividers right now.

It will be fixed in the beta version tomorrow.

[printf83]

The .list-row:last-child still has a border at the bottom.

I think the issue can be resolved by changing the ul, li structure to a div structure instead, like this:

<div class="list">
  <div class="list-row">#DIV</div>
  <a class="list-row">#A</a>
  <label class="list-row">#LABEL</label>
</div>

[saadeghi]

will be fixed in beta.2

[roberto-butti]

Amazing, I'm going to try the beta!
In the "Try it" section, i see the daisycss is still pointing to alpha:
https://cdn.jsdelivr.net/npm/daisyui@alpha/daisyui.css
i see that we can use the beta one:
https://cdn.jsdelivr.net/npm/daisyui@beta/daisyui.css

Amazing job @saadeghi

[saadeghi]

Fixed

[condemil]

Alert goes off-screen when margin is applied because of width: 100%:

<div class="alert alert-info m-10">New software update available.</div>

[saadeghi]

will be fixed in beta.2

[Megaemce]

OMG I love the Component design improvement so much! A small detail, but it makes the whole thing even more lovable!

[vchirikov]

@saadeghi looks like menu-active doesn't work at all, also didn't find example of this in the menu component page.

[vchirikov]

according to the v5 docs menu-active should be applied to the <li>, but I briefly checked sources, looks like it should be used with a tag inside the <li>...

[vchirikov]

also looks like menu-active override color of focused element, so user don't see focus on active element

[saadeghi]

Example:
https://v5.daisyui.com/components/menu/#menu-with-active-item

Docs:

menu-active | Modifier | For the element inside <li> to look active

...for the element inside <li>…

also looks like menu-active override color of focused element, so user don't see focus on active element

Yes, it is already active so it shouldn't imply that it must be clicked again. Other items change their colors on hover to imply that they are available to be active if clicked.

Let me know if you have a question.

[vchirikov]

Yes, it is already active so it shouldn't imply that it must be clicked again. Other items change their colors on hover to imply that they are available to be active if clicked.

I think focused element should be visible (I mean when user press tab - there is no indication where the focused element is). I think it might be something like 'focus-visible:outline-1 focus-visible:outline-offset-2' in menu-active..

[Avaray]

Maybe this is not related to V5, but...
I was experiencing one issue with Drawer and Modal in desktop browsers.
When you open them, scrollbar is invisible, but still takes space.
In case of Drawer with class drawer-end, scrollbar is above that drawer and might be visible.
The solution for that is to use CSS:

html {
  scrollbar-gutter: auto !important;
}

Is that possible to fix that in V5?

You can observe it in documentation of V4 and V5. Just use DevTools if you can't see that.
https://v5.daisyui.com/components/modal/
https://v5.daisyui.com/components/drawer/#drawer-that-opens-from-right-side-of-page

[saadeghi]

To disable it, use this:
https://play.tailwindcss.com/vMhvj6pG7U?file=css

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

New docs page about these base styles and how to enable/disable them if needed:
https://v5.daisyui.com/docs/base/

Let me know if you have a question.

[Avaray]

Thanks. I didn't know that solution is in docs.

[vchirikov]

@saadeghi Is there a way to combine 2 types of labels, I mean <label class="input"> + floating-label with one <input>?

[saadeghi]

What's the expected behavior? 🤔

[vchirikov]

I found the way, but I think it will be useful to have it in docs / out of the box