Replies: 41 comments 126 replies
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Yes of course. I will write the full changelog as soon as I can. The commits are here: 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. |
Beta Was this translation helpful? Give feedback.
-
|
I love DaisyUI. I suggest a date picker. |
Beta Was this translation helpful? Give feedback.
-
|
absolutely, datepicker is the hardest component though to do |
Beta Was this translation helpful? Give feedback.
-
|
Hey there , Date and Calendar most important for development, I also not find multi select, I see these in future |
Beta Was this translation helpful? Give feedback.
-
|
Hi! I would like to see progress with percentage feedback |
Beta Was this translation helpful? Give feedback.
-
|
Like a tooltip, showing a number? |
Beta Was this translation helpful? Give feedback.
-
|
yep! seems great |
Beta Was this translation helpful? Give feedback.
-
|
You would need some JS to get the value of range input and show it in the tooltip: |
Beta Was this translation helpful? Give feedback.
-
|
A context menu (https://primeng.org/contextmenu) would be very pog |
Beta Was this translation helpful? Give feedback.
-
|
That is pretty interesting |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
I suggest Select with search, for example.
I made the gif component using input + dropdown from DaisyUI S2. |
Beta Was this translation helpful? Give feedback.
-
|
The broser has some nice features supporting this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist |
Beta Was this translation helpful? Give feedback.
-
|
datalist cannot be styled. |
Beta Was this translation helpful? Give feedback.
-
|
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>
}
</>
)
} |
Beta Was this translation helpful? Give feedback.
-
Datalists are nice, but I need ID/label pairs which doesn't work sadly. |
Beta Was this translation helpful? Give feedback.
-
|
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> |
Beta Was this translation helpful? Give feedback.
-
|
Would love to see a way to control state for inputs like So for example, something like this would be super handy for me to control props and styling with.
|
Beta Was this translation helpful? Give feedback.
-
|
That's an issue React Aria should fix. daisyUI works with React Aria checkbox is not a checkbox. 
|
Beta Was this translation helpful? Give feedback.
-
|
The new "shiny" effect on buttons should be optional, not used as default.
|
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 @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 I will update these snippets to keep up with recent changes in DaisyUI. |
Beta Was this translation helpful? Give feedback.
-
|
It's easier even. You can set See Effects section here And also the CSS variable in the generated CSS code. It's a new feature. I'm writing docs for it soon. |
Beta Was this translation helpful? Give feedback.
-
|
I will suggest the date picker with range date definition. Example you can select only the date from range. |
Beta Was this translation helpful? Give feedback.
-
I will add in daisyUI 5.1 🫡 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
@aparajita Thanks for the support 💚 |
Beta Was this translation helpful? Give feedback.
-
|
Hey @saadeghi, I took a closer look at cally and it will suffice for my needs, no need to support flatpickr. |
Beta Was this translation helpful? Give feedback.
-
|
@aparajita thanks for the update. Yeah, Cally is new but it's really well made 👍 |
Beta Was this translation helpful? Give feedback.
-
|
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)
|
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
Are you guys planning to add Combo boxes? (select + text field search) |
Beta Was this translation helpful? Give feedback.
-
|
If u need #3246 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
Ability to extend the colors, base-400, base-500 etc would be great |
Beta Was this translation helpful? Give feedback.
-
|
Same with using the standard tailwind colors in the buttons and other components. |
Beta Was this translation helpful? Give feedback.
-
|
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: then I just 'extend' the base-400 into the tailwind colours (along with my other custom colours): 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. |
Beta Was this translation helpful? Give feedback.
-
|
This will be even easier in daisyUI 5 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
Just wanted to say thank you so much for this incredible project. Looking forward to the animated progress components ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
Today I discovered animated radial progress. Feels very nice imo. |
Beta Was this translation helpful? Give feedback.
-
|
How to add a prefix |
Beta Was this translation helpful? Give feedback.
-
@plugin "daisyui" {
prefix: daisy-;
} |
Beta Was this translation helpful? Give feedback.
-
|
For me the ways I look to see how beneficial a UI library will be for me are by looking at the most complex components, which are usually:
With that last one, Vuetify has the coolest implementation, being VDataTable, because of how simple it is to just pass in the list of data as a prop and the headers as a prop, with minimal fuss. This makes table mark-up a lot cleaner and easier to manage. Just my opinion. That said, I do wonder how close can one come to something like that in this library. I do understand that with Svelte and Tailwind, the purpose seems to be more of a DIY approach as opposed to a robust implementation, but just wondering if that's something that's crossed your minds. |
Beta Was this translation helpful? Give feedback.
-
|
The linked datatable implementation is based on jQuery with hacky solutions to bridge it into different frontend frameworks (React, Vue). While it's okay to use it on a jQuery based site, there are alternatives for modern technologies. I recommend using a headless datatable solution, e.g. Svelte simple datatables. It supplies the JS logic to handle the data, while you can use your custom markup and DaisyUI CSS. It's more flexible. For example, Skeleton (another UI tookit for Tailwind) only provides the CSS classes, and uses Svelte simple datatables for the logic. https://github.com/skeletonlabs/skeleton-datatables-integration |
Beta Was this translation helpful? Give feedback.
-
|
✨ New PS: This is just the style of course, you still need to add |
Beta Was this translation helpful? Give feedback.
-
|
I like that it's completely opt-in, and I don't have to worry about interference with my custom validation logic/styles (unlike with Bootstrap which forces this feature by default). After reading through the docs, I noticed that the examples only mention the HTML-based ( |
Beta Was this translation helpful? Give feedback.
-
|
@notramo I will also improve the code examples to make sure they play well with screen readers. |
Beta Was this translation helpful? Give feedback.
-
|
@notramo The example above comes from tailwind docs as is. When we talk about validation, we should split it on two parts - "visual" part and "logic" part. daisyUI is responsible only for a "visual" part that is controlled through It works out of the box with the browser built-in "logic" part. Of course, built-in solution is pretty limited, that's why I disable browser built-in validation through javascript and implement my own, all the concerns you mentioned above is solvable this way. The |
Beta Was this translation helpful? Give feedback.
-
|
I recommend renaming "Calendar" to "Datepicker", as it's more accurate. The "Calendar" name is more suited for a component like FullCalendar. With a calendar, one might expect to e.g. to have a view of the week, with hourly time slots for each day, and being able to manage the events assigned to each slot. A calendar is always visible in most cases, while a datepicker is only visible when opened (in most cases). Also, this rename would leave the "Calendar" component name unused, which can be useful if an actual calendar component is added to DaisyUI later. |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure. There's no globally accepted name. Pictures
|
Beta Was this translation helpful? Give feedback.
-
|
Yes, it's not a strict categorization. However, I think that naming the current Calendar as Datepicker would free up the Calendar name for a possible event calendar in the future. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I originally noticed this in DaisyUI 4, but the behavior is similar in DaisyUI 5, and I wonder if it's worth thinking about. My question is around buttons, specifically with hover styles and ghost styles. In these examples, note how hovering over a plain button (bottom left) has a visually distinct hover effect. The effect is much less pronounced on many other button variants, and almost imperceptible on an few (like neutral and primary). I wonder if it would be possible to use a hover state that looks visually similar (or it at least noticeable) across all button variants? DaisyUI 4: https://play.tailwindcss.com/obuMhWLmDY |
Beta Was this translation helpful? Give feedback.
-
|
Which combinations are not noticeable? As far as I know WCAG cares about the contrast between the text color and background color, not the contrast of background color of button vs background color of surface. |
Beta Was this translation helpful? Give feedback.
-
The darker they are, the less noticeable the hovers. "Neutral" for all practical purposes has no noticeable hover state. "Primary" is noticeable only if I really pay attention, and then we get into the gray area where I can somewhat comfortably notice "Secondary" and "Accent" hovers, but I am in no way a representative sample of a global audience with much worse vision and/or color recognition.
Probably some misunderstanding here as I am no way recommending or preferring the "ghost" button. Just pointing out that (currently), the lighter the button color, the more noticeable the hover visuals. The darker the button theme, the less noticeable the hover as well, approaching non-existent for e.g. "Neutral" buttons.
SC 1.4.11 covers this partially with somewhat limited reach as they also permit "ghost" buttons with this SC. As far as I know that's the extent of the WCAG story and there's nothing covering the actual hover color changes, which is my main complaint. Either way, we're probably all on the same page that the UI should be usable & accessible regardless of WCAG specs. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah I agree 👍 the darker it gets less visible it becomes. Because hover style is basically a darker shade of current color. I need to do more experiments to see if it's a viable option to make dark colors lighter on hover instead of darker… This is a challenge for any design system as far as I know. hover style is usually, darker shade (or some design systems lighter shade) but if 2 buttons with opposite lightness are put next to each other, applying the same hover style to both would result one of them with less visible hover style. I'm open to any suggestions regarding this. |
Beta Was this translation helpful? Give feedback.
-
|
I'm just gonna throw some ideas out there for consideration and discussion:
|
Beta Was this translation helpful? Give feedback.
-
|
@eokic I've been doing many tests this week. Brightening colors would only work on really dark background colors (unless we increase brightness percentage per-button which would be an inconsistent design system) i.mp4It think it's better if black buttons stay black on hover, than all the other colors get a less visible hover effect. (Again, this is not a challenge exclusive to daisyUI, you can see this in any design system) |
Beta Was this translation helpful? Give feedback.
-
|
Another good addition would be divider sizes, like (divider-xs, divider-sm etc) that controls de margin between the items |
Beta Was this translation helpful? Give feedback.
-
|
Isn't it possible to do with margins? |
Beta Was this translation helpful? Give feedback.
-
|
Allow lifted tabs to have name not just text <div role="tablist" class="tabs tabs-lifted">
<input
type="radio"
name="my_tabs_2"
role="tab"
class="tab"
aria-label="Tab 1" // It would be nice to be able to add for example Image component into the tab
/>
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
Tab content 1
</div>
</div>Additionally (and I hope I'm not being too greedy here), having tabs that can be placed on the side would be awesome. I managed to achieve this with some hacking, but it's a bit clunky...
Another thing: amazing documentation! I really appreciate how you've organized everything visually—it's very aesthetic and a pleasure to work with. A small note about the new v5 docs: there's a typo here:
Lastly, on Chrome/Windows, the color tabs have some artifacts. This issue also happens with version 4 (as you can see in the left-aligned tab image above).
|
Beta Was this translation helpful? Give feedback.
-
|
The weird line in your screenshot, is not an issue from daisyUI. style is correct. It's a rendering issue. |
Beta Was this translation helpful? Give feedback.
-
|
So this is a chrome issue? |
Beta Was this translation helpful? Give feedback.
-
|
Not every Chrome. The issue is probably with Chrome in a specific OS or using a specific GPU or graphic settings or a specific resolution or combination of each of them. Probably you can see it works correctly on mobile or using another browser. The positions in CSS are correct. If I move it one pixel, it would fix the issue on your machine but it would break it for everyone else 😅 |
Beta Was this translation helpful? Give feedback.
-
|
Damn, modern styling is hell...
|
Beta Was this translation helpful? Give feedback.
-
|
A 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 <div class="status status-primary">
<div class="status-pulse status-error"></div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
Yeah could be useful, but Tailwind already has such animation: |
Beta Was this translation helpful? Give feedback.
-
|
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/ |
Beta Was this translation helpful? Give feedback.
-
|
This can't be done with CSS unfortunately. With CSS only we can use one input, which looks like this: 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. You can use a code like this: |
Beta Was this translation helpful? Give feedback.
-
|
Hey chat, Release notes draft and Changelog draft are here. |
Beta Was this translation helpful? Give feedback.
-
To use @plugin "daisyui" {
- themes: light --default, dark --prefersdark;
+ themes: false;
}Now you can put whatever in @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" {
/*theme 1 colors*/
}
@plugin "daisyui/theme" {
/*theme 2 colors*/
}
@plugin "daisyui/theme" {
/*theme 3 colors*/
}Docs: https://v5.daisyui.com/docs/themes/#-2
Yes. It is possible. @plugin "daisyui" {
themes: light --default, dark --prefersdark;
}If you remove the @plugin "daisyui" {
themes: light, dark;
} |
Beta Was this translation helpful? Give feedback.
-
|
Ahh I somehow missed new info in the docs/themes section. After I did |
Beta Was this translation helpful? Give feedback.
-
|
Maybe it worth mentioning in changelog the migration path from |
Beta Was this translation helpful? Give feedback.
-
|
validator: maybe it's better to wrap elements for validator as <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> |
Beta Was this translation helpful? Give feedback.
-
|
@condemil will be fixed in next version. No need for a wrapper tho. I can handle it with selectors. |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! Fieldset+legend is not a replacement for 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. Let me know if you have a question. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
I will add more examples 👍 |
Beta Was this translation helpful? Give feedback.
-
|
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. 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. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for testing v5!
|
Beta Was this translation helpful? Give feedback.
-
|
Browser
OS:
This issue does not occur on v5.daisyui.com. When the bug happens, I try to inspect the page using
If I rename the class However, if I navigate to another page using the drawer, sometimes the scrollbar disappears on the new page as well. Renaming the I can share the URL, username, and password for the test website in a private message or via email if needed. |
Beta Was this translation helpful? Give feedback.
-
|
hey, thanks for the link. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Fixed in |
Beta Was this translation helpful? Give feedback.
-
|
Would like to see a range slider that:
Like this: |
Beta Was this translation helpful? Give feedback.
-
|
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… 😅 Currently radius, color, size and the depth effect are customizable from theme. |
Beta Was this translation helpful? Give feedback.
-
|
Track customization: color, size, background. Definitely want to easily get only the thumb without the "shadow" to the left. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. I will add more options and more examples to docs 👍 |
Beta Was this translation helpful? Give feedback.
-
|
🙏 |
Beta Was this translation helpful? Give feedback.
-
|
fixed in
|
Beta Was this translation helpful? Give feedback.
-
|
Can we have shadow on |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
fixed in |
Beta Was this translation helpful? Give feedback.
-
|
table inherit style from parent |
Beta Was this translation helpful? Give feedback.
-
|
Yes it inherits. What is your use case that you need nesting tables inside each other? |
Beta Was this translation helpful? Give feedback.
-
|
I think it should not inherit styles from the parent table. Only tables with the class table should have table-specific styles. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Yes, do it like Example: There's no class name for zebra, but of course you can add bg colors. |
Beta Was this translation helpful? Give feedback.
-
|
I think only li.list-row elements have dividers right now. |
Beta Was this translation helpful? Give feedback.
-
It will be fixed in the beta version tomorrow. |
Beta Was this translation helpful? Give feedback.
and others
-
Hello and welcome 💚
daisyUI 5 is in development [v5 branch]
There's no docs or changelog yetRelease notes, ChangelogsSome components are not readymanybugsand anyalphabeta version may break thingsdieget sickTry it
You can try this Tailwind Play link which includes a big dump of components
Or you can try the new
full.cssdaisyui.css or the new chunks.css!Or if you're brave enough to try Tailwind CSS 4 beta + daisyUI 5
alphabeta,Install Tailwind CSS 4
alphabetaand then install daisyUIalphabetaYour CSS file:
Use options
Add a custom theme
Feedbacks needed
Here's how you can help:
alphabeta? Let me know.Put your comments 👇
Beta Was this translation helpful? Give feedback.
All reactions