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.

[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

[saadeghi]

Thanks for the gif. I will add more examples including this

[printf83]

The join button has a shadow gap 🙏🏻

[saadeghi]

Yes. shadow is smaller than button to make a realistic elevation feeling. Joining only handles the border radius of items, so there will be a gap.
Can be improved by adding a shadow with same color to the join, but it can't be automated, as Join is not aware of the color of the buttons inside.

[vladshcherbin]

Would be great to have some modern theme for designs close to what Vercel, V0, Nextjs, shadcn/ui, Resend, Scalar, Supabase, etc have.

I don't know what has to be changed visually, but I've tried all themes from v5 dropdown and the generator. All of them look somewhat childish and don't feel like modern minimal ones, generator output also wasn't close to desired designs.

some inspiration:

• geist ui
• shadcn ui
• vercel ui (vercel dashboard is even a better example)
• scalar ui, scalar client ui

[saadeghi]

Yes it's not possible to satisfy everyone's taste in design as many people have the opposite taste of many other.
I agree some design details were not the best in earlier versions of daisyUI. Some people's perception is still daisyUI v2 for example, as they didn't try the newer versions on any project.

But if you checkout the design of daisyUI from v1 to v5 (all sites are still online), you can see the improvements in design are huge on each version.

• https://v1.daisyui.com
• https://v2.daisyui.com
• https://v3.daisyui.com
• https://v4.daisyui.com
• https://v5.daisyui.com

[saadeghi]

The new theme generator is so easy to work with. I will add "sharing" features to it ~next month so it would be easy to share custom themes with others. This way people can make themes that looks like the theme of any website they like.

[vladshcherbin]

@saadeghi yeah, something similar to your link.

I've tried similar options (but for dark theme) and while I feel similar vibes from some components, the rest feel like they don't work with each other. Like if I took some components from one library, some from another and then stitched together (best I can describe).

I mostly blame it on font sizes/weights and paddings/margins inconsistency, but that's just a feeling that I get when I see components together.

These are just my observations as a newcomer (though I bet I've probably checked previous versions too) 🙌

[saadeghi]

@vladshcherbin Try https://v5.daisyui.com/theme-generator/
You can customize sizes as well.

Also most components have size modifiers from xs to xl
Use the size the would fits better.

daisyUI is highly customizable. Especially in v5 everything is variable now.

[vladshcherbin]

@saadeghi yes, I clearly see many variants of component sizes and I actually believe it's possible to craft something very similar to what I desire with different combinations.

I think my wish was to see a demo (or a theme) with output similar to shadcn/ui and be sold from the first sight 😅

[eokic]

Bug report: when using the floating label and once the input is filled, clicking the label (<span> technically) does not focus the input. Removing pointer-events: none; from the <span> seems to fix it.

[saadeghi]

Will be fixed in beta.2

[printf83]

Toggle and range border radius not follow radius setting

Textarea border radius not follow radius setting only in this preview (hardcoded rounded-xl)

[Avaray]

Near "Boxes", "Fields" and "Selectors", you can read what they are affecting.
I believe it works as intended.

[saadeghi]

@Avaray yes, but @printf83 is right, the textarea in the screenshot should have 0 radius based on the chosen values. And range slider is the inner radius not outer one.

It will be fixed today 👍

[CoderJo-Pro]

I still love the classic shrinking effect for the button, it would be nice if there is a ready-to-use option for it. For example, another class btn-scale for the old style, allows you to apply it to the btn class whenever you wish to override it.

[saadeghi]

Here's the scale animation:
https://play.tailwindcss.com/99CH6ItrTF?file=css

There's a different click animation in v5: It moves the button slightly to bottom while button is pressed.

The problem with scale animation was relying on the size of button. The button used to get smaller only 2% (to show a pressed effect) The issue is, 2% of the size of the button used to create different scales for each button. if a button is 100px wide, it would get smaller to 98px, if button is 200px wide, it would get smaller to 196px. 2px vs 4px. So the bigger the button gets, the click animation was getting more exaggerated (see btn-block for example).

For v5, the click animation is consistent for all sizes of button and it fits better with other components as well. As all other animations are about movements in X,Y axis while scale was a change in size...

Customization are still possible of course, in CSS file, or for each theme or even using Tailwind CSS utility classes.

[CoderJo-Pro]

I agree with the large-size button issue.

But still, the new animation has a somewhat retro feel. The daisy website was flat and modern, but the hover darkening, and top-border highlight in v5 feel visually messy and too high-contrast in the dark theme.

Also, the v5 animation is not as satisfying as the classic one in my experience.

[saadeghi]

Everything is customizable.
The border highlight and the "depth" effect in general is a CSS variable you can set for your own theme.

See the "depth" option here:
https://v5.daisyui.com/theme-generator/
Disabling it would give you flat design, enabling it would give a depth effect to button and other relevant components.

And you can use the old animation from the example I linked.

It's not possible to satisfy everyone's taste in design so I highly recommend customizing things the way you want.

[vchirikov]

It will be nice to have an option to disable card-side with media queries, e.g. I want to use
xs - default card, sm:card-side and on lg again default style of card (image on top, because grid has less columns with lg for example), it is possible to add? some class like card-top
cc: @saadeghi

[saadeghi]

Tailwind has max-* responsive prefixes as well.
For example you can do max-sm:card-side (sm and less) or even mix them like sm:max-md:card-side (between sm and md)

[amir20]

In v4, implementing a polyfill for popovers is challenging. It works well in Chrome, but I found that in Safari, I needed to apply additional styles for it to function properly.

<template>
  <button popovertarget="popover-container-list" class="btn btn-xs md:btn-sm anchor font-mono">
    {{ container.name }} <carbon:caret-down />
  </button>

  <ul popover id="popover-container-list" class="dropdown menu rounded-box bg-base-100 tethered shadow-sm">
    <li v-for="other in otherContainers">
      <router-link :to="{ name: '/container/[id]', params: { id: other.id } }">
        <div
          class="status data-[state=exited]:status-error data-[state=running]:status-success"
          :data-state="other.state"
        ></div>
        <div class="font-mono" v-if="other.isSwarm">{{ other.swarmId }}</div>
        <div class="font-mono" v-else>{{ other.name }}</div>
        <div v-if="other.state === 'running'">running</div>
        <DistanceTime :date="other.created" strict class="text-base-content/70 text-xs" v-else />
      </router-link>
    </li>
  </ul>
</template>

<script lang="ts" setup>
const wrapper = useTemplateRef("wrapper");

onMounted(async () => {
  if (!("anchorName" in document.documentElement.style)) {
    const module = await import("@oddbird/css-anchor-positioning/fn");
    await module.default([wrapper.value]);
  }
});
</script>

<style scoped>
/* https://github.com/oddbird/css-anchor-positioning/issues/282 */
.wrapper {
  anchor-scope: --anchor;
}

.anchor {
  anchor-name: --anchor;
}

.tethered {
  margin: 0;
  padding: 0;
  position-anchor: --anchor;
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
}
</style>

Also in oddbird/css-anchor-positioning#282. Here are the changes:

1. Inline styles don't work in Vue if the browser doesn't support it. Unknown styles are stripped
2. I found m-0 and p-0 needed.
3. Position absolute was needed as fixed broke while scrolling.
4. top and left anchor were needed.

Adding this here as it might be helpful for others. But perhaps, DaisyUI should also have these styles applied for better support with css-anchor-positioning.