Differences between DaisyUI and HeadlessUI
Hi all! I'm very new to Tailwind (but found about it through Theo's channel) and am having trouble comparing Headless UI to Daisy UI. From what I understand, Headless UI is a utility library for unstyled UI components, whereas Daisy UI is a style library that adds CSS classes for theming UI components, but also seems to have an unstyled option.
I'm having trouble understanding the niches each of these libraries fill. Can/should I use them together? I understand that HeadlessUI is unstyled, but does it provide functionality (maybe in terms of utility/accessibility) that DaisyUI does not? Thanks in advance!
7 Replies
Headless ui components they give you the functionality without the styles
Maybe daisy ui is adding their own implementation or using some headless component as well
Main thing with ui components with functionalities like that is that they come in with "sane" styles, as they are part of a whole ui package
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
DaisyUI is zero js. It achieves interactivity via hacky means. For example the open and close state of a modal is controlled by a checkbox
If you look at the css files for daisy ui you can see they lean on data attributes and other things
Modal — Tailwind CSS Components
Modal is used to show a dialog or a box when you click a button.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Because of the way they implement things to use no JS, it means their way of structuring html is very rigid. The moment you want to customise the layout things can break very easily, as their behaviours might be heavily tied to a certain layout or nesting/placement of tags
Using the drawer component from daisy ui is also flawed. Because scroll state is not correctly preserved when changing pages
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View