Why I'm removing Daisy UI from my side projects and some refactoring

short story, daisy ui's accessbility sucks

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

[nightshade]

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.

[johnfay]

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.

[sharedgametimer]

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.

[walzen]

The modal was updated to recognize the ESC key and you can now also tab to the "YAY!" key

[tweney]

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.

[gagiknavasatariyan]

I think for some issues, we shouldn't throw a library away. I think we should contribute and communicate.

[franciscokloganb]

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


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!

[johannesmariomeissner]

What stops us from applying daisyui classes to headlessui components? I was planning to go down that route for my project.

[glycincheck]

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?

[appel-]

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

[curiouslycory]

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?

[Zugzug]

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.

[RolandAyala]

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

[yousafwazir]

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

[tudor]

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

[aeronwolfe]

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

[JEsterCW]

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💪😇

[Evikeuklavier]

Behavior library + custom styling is the direction I’m going towards as well

[aeronwolfe]

the escape thing is fixed in the 3 version tho

[cloudsystem]

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