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!

Neto•4/6/23, 8:12 PM

Headless ui components they give you the functionality without the styles

Neto•4/6/23, 8:13 PM

Maybe daisy ui is adding their own implementation or using some headless component as well

Neto•4/6/23, 8:14 PM

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

jingleberry•4/8/23, 2:33 AM

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

jingleberry•4/8/23, 2:34 AM

If you look at the css files for daisy ui you can see they lean on data attributes and other things

jingleberry•4/8/23, 2:34 AM

https://daisyui.com/components/modal/

Modal — Tailwind CSS Components

Modal is used to show a dialog or a box when you click a button.

jingleberry•4/8/23, 2:36 AM

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

jingleberry•4/8/23, 2:37 AM

Using the drawer component from daisy ui is also flawed. Because scroll state is not correctly preserved when changing pages

Differences between DaisyUI and HeadlessUI

Similar Threads

Similar Threads

Similar Threads