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.

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

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

[Zerotask]

+1 for release notes :D

[saadeghi]

https://v5.daisyui.com/docs/v5-beta/

[Zerotask]

I meant that I really like the release notes and the images

[saadeghi]

Ah, Thanks 🙏

[alxNoComment]

Question
tailwind 4 + daisyui 5
In the documentation for modifying existing components, it says:
https://v5.daisyui.com/docs/customize/

But in Tailwind don't recommend such a notation, and it's said that this should be wrapped in a @layer components {} . Is this what was meant in the DaisyUI documentation, or what is the correct way?

[saadeghi]

The docs is showing how you can customize existing class names.
You can use it however/where ever you want, in or out of a @layer.

what is the correct way?

It depends what you want.
See this example:
https://play.tailwindcss.com/cEZie1dEO2
It is set to rounded-full in CSS and again set rounded-none in HTML
Because it's in @layer components the utility class in HTML has higher priority.
If it wasn't in @layer components the utility class in CSS would have higher priority.

[thiagomajesk]

Somehow I missed the beta release (I just saw the announcement on the website). I used DaisyUI for the first time a long time ago and it's great to see how far the project has come. So I wanted to leave a huge shout-out to @saadeghi for all the amazing work!

PS.: @saadeghi consider adding a discussion section like this for DaisyUI. I bet more people want to share their thoughts and experiences with the project. Thanks again for all the hard work folks! ❤️

[mispp]

Is too late to ask for a time picker? Was proposed by several people already...

[saadeghi]

Try this
https://v5.daisyui.com/components/input/#time-input

[alxNoComment]

How can I combine the component check and my own check in this component?
https://v5.daisyui.com/components/validator/
like as return valitor result = input base validator && mycustomBool;

I didnt find validator-error , validator-success classes

[alxNoComment]

Combine is && operator
Its maybe front + back , or front + front.

Example i type chars and take success validator

after i run function what result is fail, and i try add class input-error. But nothing happing. Input the input remains green.

How can I combine my validation check and the validation provided by the validator component?

[saadeghi]

I think what you're trying to do has a logic problem. Data cannot be valid and invalid at the same time. If it's invalid by the server it shouldn't be valid by client.
For example if it's checking the availability of a username, it shouldn't show it as a valid input before the server checks of the username is available or not. Because if it is unavailable, it is not valid and shouldn't be submitted so there's no point of HTML validation showing a green color.
It should be server validation only in this scenario.

[alxNoComment]

My logic was simple. Client-side validation affects the size, characters, and regular expression. Then I check if such a user exists on the server, which can influence the result of client-side validation. However, it seems that this component is designed purely for client-side validation.

[saadeghi]

it seems that this component is designed purely for client-side validation

Yes. It's HTML validation.

My logic was simple. Client-side validation affects the size, characters, and regular expression. Then I check if such a user exists on the server, which can influence the result of client-side validation

I understand, but it means I fill the text input, browser tells me it's valid, then I submit the form and server tells me it's invalid. That's …confusing.

[condemil]

@alxNoComment you can set validation via javascript with setCustomValidity(). You can pass validation data from server and use some js framework or plain js to update your element validity based on that data.

[CHC383]

Is there a way to use the colors of DaisyUI theme in the Tailwind CSS v4 theme, like setting alias similar to #2140 (comment)?

[condemil]

Can you clarify the end result that you want to achieve? Theme colors already available, for example, bg-primary, text-primary etc... If you want to have an alias to name it in a different way this is also possible:

@theme {
  --color-test: var(--color-primary);
}

this way the color will be available as bg-test, text-test etc...

[CHC383]

Thank you! This is exactly what I am looking for, and just to add a bit more context for others

1. Adding variables in Tailwind CSS v4 by default behaves like extend in v3
2. Theme namespace reference
3. The DaisyUI v5 CSS variables can be reference in the @theme directive

[Avaray]

@saadeghi Small issues related to Diff component.
The area within the circle where you can click and drag seems to be smaller than the circle itself.

[Mashiane]

Request for support for checkbox in label component.

https://play.tailwindcss.com/zSRRTQCi2g