Why I'm removing Daisy UI from my side projects and some refactoring
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- short story, daisy ui's accessbility sucks
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/cod...
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
DaisyUI is html/css component library, the focus trapping, and keyboard shortcuts is handled in JavaScript which daisyUI doesn't do. That's why it supports any framework (react, vue, anything), because daisyUI does the html/css and you pull it into the framework of your choice and handle the rest.
HeadlessUI on the other hand is a JavaScript/React component library and handles the JavaScript part. Which is why keyboard shortcuts and focus trapping work.
Exactly, it is weird that he doesn't know that. DaisyUI is pretty much just a style system, how can you expect a functionality that requires javascript from something that doesn't have it?
@@diego.almeida your comment even got a heart, altough it outlines the un-necessity of this whole video. and as it happens to probably many people: it wasted my time. i thought there were some real issues with daisyui, which is not the case.
I'm glad I watched this video, because I wasn't even thinking about accessibility. But the answer is to use RadixUI, which is (oversimplified) a library of unstyled wrappers to make your ui components accessible. You can actually use it with DaisyUI too.
Perhaps you're correct. However, why did they fix the modal thing in version 4.6.0?
@@pamungkasandono I haven't used daisyui in a while, but I'm betting it's because there is a new html element called dialog that just came out and gives them ability to offer model support in pure html
The modal was updated to recognize the ESC key and you can now also tab to the "YAY!" key
I think for some issues, we shouldn't throw a library away. I think we should contribute and communicate.
yeah, I might have been too harsh on this library
@@WebDevCody no, bro. You're honest. We need people like you.
@@gabriel_luzz He is honest, but all the things he mentioned is now fixed, I tried most of them... for modal accessibility at least (close on escape and tag to close btn)
indeed because daisyUI is great.
@@WebDevCody I checked, and issues you mentioned solved about modal
I haven't run into any of this with DaisyUI. I think this is more a problem with the react-daisyUI repository. DaisyUI is just like tailwind where it gives you some classes for styles. To your point though, Daisy should fix their docs to have a11y considerate examples.
DaisyUI is unique in different ways. It only provides, better looking and more unique components that look different than most other "tailwind component libraries", while making it super easy to customize - but you have to deal with accessibility by yourself! On the other hand, Headless UI provides accessibility but does not provide any styling. So clearly, they are positioned in completely different ways. I've used Headless UI, DaisyUI, Radix, and pure Tailwind a lot, and I am happy with all of them (again in different ways).
Finally, have you considered that you can use both? DaisyUI is just a few sprinkles on top of `Tailwind` with added "@apply" directives; Nothing prevents you from creating your own custom components to use in particular parts of the App, consequently, you can use headless UI where you feel Daisy is lacking.
For my latest project, I picked DaisyUI for a handful of reasons:
- I want to go fast and I am currently working on it alone
- The design they provide already resembles what I envisioned either way
- I am not caring about accessibility right now, what's the point of optimizing for a few users when I don't have any users, Storybook will eventually help me fix accessibility issues (or at least the most glaring ones)
- I am using Remix, and `Tailwind` styled components are damn near impossible and I prefer to keep my components slim. Having easy classes provided by DaisyUI, which I can easily customize on the theme, not only makes the components clean but allows me to quickly and easily adjust the entire project components in a single file.
If the project, grows and ends up being a success (unlikely), I can always deal with accessibility or migrate to custom designs made by UI/UX designers leveraging Radix-UI which for me is the best headless UI Library out there;
Food for thought!
To me it just seems like your complaining and just finding a single issue to get rid of it, the regular Daisy ui is really good and a few accessible issues can be fixed by you the dev, the code is designed to be used in any framework and it’s just basic html. The way you use Daisy ui is like a component library by that third party one, try using the regular Daisy ui
@Jarricano He is complaining about everything, typical celebrity yt frontend programmer.
@@RaZziaN1 ayo man, chill the fuck out.
The accessibility issues are perfectly valid chromium’s AXTree stuff only goes so far without abuse from frontend devs. This is a completely valid refactor.
@@RaZziaN1 bruh relax… it’s not this deep.
Lol just let him complain… we will all hopefully live to see another day
Necro'ing this thread for anyone that lands on this video - they appear to have sorted the accessibility stuff the highlighted about the modal in the start.
Now Daisy Ui fixed these issues.
I removed it from mine as well. I personally like the full control of building from scratch using tailwind UI + headless UI. Could I maybe send you an E-Mail with a link to my side project to get a code review when you have time?
I tried dasiyui and ended up removing it as well. I like the semantic color naming, and if I were style my site to include more than dark/light mode, I'd keep daisyui in my project for its theme support. However, daisyui language is a bit too cartoonish for my liking and its more of a shortcut solution to using tailwinds than a full framework solution like mui or mantine, and doesn't provide much incremental value for the added dependency IMHO. If I liked the daisyui design language, I'd feel differently (I realize can customize, but then not saving me any work over doing the same w/ standalone tailwinds).
As noted below, this video is outdated. DaisyUI supports things like ESC to close modals by default. This video also talks about kludgy HTML when using with react, seemingly ignoring the JSX tab next to the HTML one for react ready JSX code.
DaisyUi is the ultimate ui library that if it was a paid I’d pay anything, they made it free to contribute and give feeds in such bugs
Tailwinds and HeadlessUi are great. There is also tailwindui which has prebuilt and styled component.
Radix and React Aria is what you wan't. Accessibility by default, no styling, easy to use and highly customizable.
I need to checkout radix, I keep hearing good stuff about it.
Would it be possible to use the Daisy CSS classes on the HTML5 Dialog element? That will then give you all the accessibility that you want (apart from back-button catching) by the built-in browser behaviour.
What do you think about radix ui? It provide a lot of accessible components that work well with tailwind-radix package and headless ui transition for animations on modals. I'm working to build a full ui with it.
I’ll have to check it out
Had to checkout Radix ui, very cool project!
I totally get what you’re talking about, but we all have to understand that daisyUI is meant to be a css library. Not a component library. To make the best use of it you should combine the styling from daisyUI with something like headlessUI. The whole point is to use the styling to build your own components. If you’re someone who doesn’t like doing that then use something like MaterialUI because it is a component library.
Side note: ChakraUI is kinda middle ground where you get component library like features but tailwind ishhh styling
Then why does it open and hide a modal and dropdown for us when we click something? That’s component logic, not css. If it’s just css, then they need to strip out all logic from these classes and just give us styling
@@WebDevCody You can & probably should use the css classes without the logic.
When you take a look at the docs, there is the modifier "modal-open". This is the clean way, when you use JS. This is actually the way react-daisy-ui does it. But without attaching a class via JS, you cant build that "functionality" of opening. Except you use that Label hack, they use in their docs. But by putting JS code into the docs, they get framework specific. Should they state how you do it in react? vue? svelte? jquery? native js? I think you get the point.
For me it was intuitive that the way they do it in the docs is not the production way to do it. And they provide you everything in the docs to build it "the right way". But seeing all the comments here, I would say they have to improve their docs somehow that this confusion does not come up.
I tried Daisy UI on 3 projects now, and I'm also removing it. I reached out to the developer for a simple question/idea/suggestion and he wasn't to keen about hearing anything. I see why the Daisy community is a big fragmented. He hates js.
I feel like some accessibility issues can be addressed if you write fixes for them yourself. DaisyUI, IMO, is great for stuff like Buttons, Navs etc.
About the Modal - it’s just tailwind but abstracted. Componentizing the Modal with some custom logic should be fairly easy. Removing the entire library because of minor fixable issues is something I’d personally not do!
you right i was thinking the same thing but he doesnt feel that way. to each their own i guess
I guess I rather just use a component library instead of a css library where I don’t need to address accessibility issues myself as much
isn't daisyui just a css framework? Components in my understanding for me are encapsulated & include JS.
Are there any css-only frameworks which can solve the accessibility problems?
@@Ca-rp7bv I cant find any js for the modal component. As far as I understand the source code, the modal state is modelled via a checkbox.
I think the pretty clearly state it is a pure css component framework
@@Ca-rp7bv daisyui is pure css, wake up mate 😉
i honestly didn't removed it yet because i will have to refactor a lot of code, but i been also having a lot of difficults dealing with it, at this point i don't know if the time consumed dealing with problems overpassed the time it'll took me refactor all
2 hrs ago i turned off my laptop after hours of struggling with daisy, its a great project, but not for working in frameworks like react... I was about to build my big platform using daisyui, but after the 4 days of using it i realized how bad dx it has... Its too much native approach to building web apps and i was spending more time trying to figure out the weird native html structure than focusing on building my platform and coding functionalities.
I decided that I will try to use material tailwind temporary for prototype or chakra ui cause im planning to make my own react ui library based on tailwind built using styled components etc, but until i won't have enough of components i ll stay on ready to use solution like chakra or material tailwind and i dont even bother myself with a11y atm, but im also thinking about react aria seems interesting.
Anyways I'm starting from scratch with my platform im glad i had only few smaller components and i wont lose any time anymore.
Daisyui is imho the most interesting project from all tailwind based ui libs, but its too much native to me when i want to build kinda much bigger web apps than todo list lmao and its not even about that i DONT KNOW HOW TO USE IT, its just bad for my case and non-native apps, its too much work for make it work "fine" like really man... Im really disappointed, i have had huge expectations, but sadly... it is what it is 😅.
I feel you man and greetings, stay strong💪😇
the escape thing is fixed in the 3 version tho
Dude, Mantine. I don't know why people don't know about Mantine but it's really good.
If it's not too much, perhaps you should try to fix some of the bugs. I usually do that when I'm using some open source projects as long as it's not much to fix it.
you can replace all imports with custom component card import and props I believe its the library you used for your issue you can do interactivity with event listeners on diasyui components thanks for sharing
Yeah im in the same boat aswell. You use the shopping cart icon with dropdown and once you click on it, the shopping cart remains clicked and visible even as the page loads lol
Yeah i don’t get why the main components, modal and dropdown are so janky. Am I missing something? If we need to code our own logic then why is the css controlling our components in the first place
@@WebDevCody Yeah lol, shits whack. Honestly time to revert back to bootstrap - never had a problem with accessibility with that. At this stage I have accepted that styling will always be a pain in the ass, no matter what solution you go for. If the tailwind ui components that are paid for solve the problems daisyUI then we could be talking... Great video nonetheless man
i know this video is older but, i'm not a fan either. for example, on the modal, you can control it with a hidden checkbox(?why!!!) or by adding/removing a class (DEFINITELY not my preferred method, as it is ugly) or by a URL parameter (wtf??)... also apparently, you can use an onClick={()=>window.my_modal_id.showModal()} prop, but since my_modal_id isn't defined before runtime in vscode, i get an error until runtime... i guess i could use a getElementById() but ug... why can't they just include a 'isOpen' boolean prop or something like that... just not a fan...
It’s built to work without JavaScript so it has a bunch of html css hacks I think
The modal is terrible, the label and modal logic is strange for any React alike framework, the Drawer is super new and flawed and the inputs are as good as 2 lines of tailwind ( I regret using it but no one will pay me to replace it at this point lol )
Nice video as always and good points ! I hadn't noticed those flaws myself
I think these are all symptoms of trying to do everything only with css and no js. So unless you invest the time to add functionality, you’re stuck with some broken components. The styles look good though, nothing wrong with using the built in classes, I’d just avoid anything with toggle logic backed together using labels
@@WebDevCody That's it. You simply can't provide 100% accessibility for complex websites/apps with just CSS and HTML. Navigation is a huge part of it (like you showed that there's no tab-focus on the modal, so it doesn't ignore background content). Of course this doesn't mean you need JavaScript for all cases, you can get a long way with CSS for states using ARIA attributes as selectors, but custom interactive components cannot really be done well without.
Behavior library + custom styling is the direction I’m going towards as well
daisy ui is for the looks, alpine JS is for the behavior
What stops us from applying daisyui classes to headlessui components? I was planning to go down that route for my project.
That might work fine
Did you try a pull request?
So it can sit there for weeks and never get merged? No thanks
I really like the idea of a ui package that uses tailwind instead of being an addition to it. In a pure sense however, that means that I'm limited to the tools that tailwind (and standard css) provides. Is there even a way to disable/modify tab indexing through css (I don't think so, but css seems to get better every day)? Daisy UI is pure in this sense which is cool, but has its limits.
So then, would it make sense to write an accessibility package that enhances daisy, or would that start to eat away at what makes daisy special?
I’m sure there are ways to improve the accessibility, but I don’t have the time or energy to do so, so I rather grab a component library that has screen reader support out of the box
@@WebDevCody @headlessui/react is a very small package and is even tree-shakeable so the only other argument I'd have over package size is very minimal and less important than accessibility for the majority of use cases.
Radix and React Aria is what I'd recommend. Radix provides non-styled components which you can style via. most CSS solutions you need (CSS Modules, Styled Components, Stitches, you name it). React Aria are mostly functionality provided as hooks to help you build lower level components with all the accessibility features built in. Where Radix lacks something, React Aria mostly covers that and vice versa.
DaisyUI is pretty low quality and really only good for throwaway hobby projects. Those saying that it just provides styles and that you should implement the accessibility stuff yourself probably don't understand how hard that it is to do well. Styling is the easy part compared to implementing proper keyboard navigation, focus trapping and all that.
tldr, use a headless ui library.
I don't know but I find these UI framework very annoying. So many wrappers and what not. Just freaks me out.
I have tried to use few of them and all of them annoyed. Now I make UI by tailwindcss. Simple and works for me.
what do you think about shadcn ui ?
This is understandable, you react users expecting js functionality from a style library.
I installed daisyui for exactly 15minutes.... I was immediately annoyed by the things it does
I haven't done any frontend work in over a year but as someone who values both accessibility and appreciates a good modal, I applaud you for removing this.
Yeah I try to keep accessibility a priority although I’d say I’m still a noob at making fully accessible sites using proper semantic html
@@WebDevCody we all are, even as a seasoned developer who cares a lot about accessibility, I also struggle to remember all the nitty gritty things like ARIA attributes, keyboard events, etc. But this is why we need better libraries and browser defaults to make it easier. I personally use Radix and React Aria, because they offer the best experience I've had so far both as a developer but, most importantly, for users. I'm sure HeadlessUI strives for the same, although it is a bit lacking in controls.
I just checked.. There no issue with models as u mentioned...
Maybe it’s been fixed since I made that video, but I doubt it has focus lock and cancels when pressing escape
muito obrigado por fazer esse video, agora adasyui vai fico melhor pela sua critica e o modal esta funcionando com acessibilidade agora.. eu vou experimentar esse dasyui kkk
You could have instead made a PR to DaisyUI. Imagine how much more that would have brought to the world ;). Seriously.
Why don’t you contribute to react-daisy-ui?
Would probably result in a 10% salary increase next time you switch jobs and you would be giving back to the people that make all these tools you use.
Because every time I try to contribute to open source, my Pr sits there for weeks and then gets closed
@@WebDevCody fair enough
What about reachUI ?
Never heard of it I’ll have to check it out
I thought you shifted to Svelte 😅
Nope lol
I use bootstrap.....
Use MUI maybe . Will save you lots of headache as it's loaded with components. Since, it's a small project, override will be easy for you if you want to do some unique styles.
Yeah I need to check it out
Month a go you liked daisy ui
Yeah, I didn’t use it long enough to see if had issues
Good job babe!!!!
Mantine ftw 🎉
I need to try that one out
Yeah, using Mantine for my side projects. So chill and good looking otbx!
+1 for Mantine. The components are great and the hooks are super useful.
you might as well just get rid of tailwind then ya big baby
Why? Tailwind is fine, the issue I have is with daisy. Even the dropdown component doesn’t toggle off when clicking the button again. It’s a css library but I want a component library I guess
Lol y’all software people are heavy hitters with the insults huh “ya big baby?” 🥴
If you're gonna make comments like this, at least be informed about what you're talking about
If you want accessibility definitely check out ChakraUI
I did try that a bit but I wanted to stay with tailwind related packages for now
@@reinhardkevin7488 right now just headless ui any logical components, and probably copy paste any free tailwind ui or wrap my own components.