Why I'm all-in on DaisyUI

I recently launched a site and I used a few libraries - the ones that stood out the most were shadcn and daisyui and I've completely decided to go all on DaisyUI since. This short post gives a tiny glimpse into my experience with both.

Before finally deciding to launch TypeQuicker I tried using various CSS libraries. Whatever was the flavour of the month or whatever has been revered in the past, I tried it.

I'm a perfectionist, so to be quite honest I spent way to much time on this but at least I can save you time on deciding what library to choose and why that library is DaisyUI.

Since I tried most, I can give you a clear rundown on why in the end I settled on it, and why.

I started with vanilla Tailwind, however I quickly realized that given all the features I want to, that unless I create my own default components (buttons, cards, etc) my project will not have a consistent UI interface and so I decided I should pick a CSS library.

Queue decision paralysis.

There are so many choices - I see questions like "Which CSS library should I use?", and "Is X library good for X type of website?" on various programming subreddits all the time.

My approach is always choose whatever has the most support by the community and developers. I want something that will be maintained, and updated as browsers roll out changes.

I started with Shadcn. Right out of the gate, setting up was a bit of a pain to be honest however they do have beautiful components; especially charts/graph. On TypeQuicker I heavily focused on having detailed statistics so this really appealed to me the most!

Comparatively, out of the box DaisyUI doesn't have that many stats/graph components but it's insanely easy to set-up. This isn't really the libraries focus and over time I came to appreciate this. There are many dedicated stat libraries and I quickly realized that for stats, it's better to use a mature library that's made specifically for that purpose; I think Shadcn UI offers great out of the components but I decided on using a dedicated/mature library like recharts.

For stats, I used recharts with DaisyUI classnames for colors and the result is seamless; see for yourself:

My most favourite part about DaisyUI is that how easy it is to use in conjunction with other libraries. If you need to add DaisyUI colors or styling to other libraries, you can do so by just settings the style of that library component to use DaisyUI class names; here is an example:

            <XAxis
              xAxisId="time"
              type="number"
              orientation="top"
              stroke="var(--color-primary)"
              tick={{ fontSize: 12 }}
              tickLine={{ stroke: "var(--color-primary)" }}
              domain={[0, "dataMax + 50"]}
              tickFormatter={(value) => Math.round(value).toString()}
              allowDecimals={false}
            >
              <Label
                value="Time (ms)"
                position="insideTop"
                offset={-15}
                style={{ fill: "var(--color-primary)", fontSize: 12 }}
              />
            </XAxis>

You can reference the default DaisyUI CSS as such: stroke="var(--color-primary)" - this will then set the stroke color to use the DaisyUI primary color.

I cannot emphasize how smooth and seamless this made front-end development for me. This was a first time where using a CSS library, at every step of discovery of new features that I felt deep appreciation for the developers who designed and built this. Thanks to DaisyUI - I can finally say I somewhat enjoy doing CSS lol. Before this, I dreaded it.

Another reason I prefer DaisyUI is their discord is extremely helpful. They have a large community with lots of support, have a channel that contains past questions (which I searched through a lot) and in general, very vibrant and helpful community.

They also did a comparison between DaisyUI and Shadcn here; there are a lot comparisons and pros/cons (I won't dive too deep into the comparisons; you can see for yourself on the page) but for me the biggest selling points right away were:

DaisyUI is on the left; ShadCN is on the right

Why in a world would you want to use a CSS library, that has 2MB of JavaScript??!!. Am I crazy?

DaisyUI has no Javascript and no dependencies.

Let that sink it for a moment. NO DEPENDENCIES (Even is-even has one dependency lol)

No don't get me wrong, I'm not hating on Shadcn - it's an amazing library and it very much has it 's use cases; it's specifically designed with React in mind so I think React/NextJS focused communities and devs can built complex UIs very quickly. For me that's the biggest selling point of Shadcn.

However, those use-cases are not use-cases that I have. Nice thing about DaisyUI too is that you can use it in any library (or just plain html/css via cdn).

To summarize, I'm betting on DaisyUI going forward - I recently had some initial subscriptions on TypeQuicker and I immediately contributed a small sum to DaisyUI's OpenCollective page. If you are using them, or want to use them, please consider contributing. From someone who's built a full project with them, their devs did an insane job. As my site grows, I'm planning on joining the monthly contribution list.