Back
Question
Asked

DaisyUI or Flowbite (solved, I went with Daisy)

Hey, if you can only choose one, DaisyUI or Flowbite?

And why?

Also, if I use both in, will it make my page heavy or does the library only include classes I actually use?

My underlying framework is AstroJS.


you could use both and it would not be heavy. both packages optimize for only the classes or components you use. however i'd advise: don't use both at the same, huge redundancy and creates confusion in your project.

personally started using daisyui because its so simple and just css classes like tailwind, feels like my code is a bit cleaner, also because you can just use vanilla html elements instead of constantly importing components.

otherwise just depends on which design style you like more/prefer

Daisy it is, thank you for highlighting the thing about importing components.

Unrelated to the question but related to daisy: it ships with a default dark mode for its components. Do you know I can disable the default dark mode? I looked in the docs but no luck.

You’d have to set themes manually in your tailwind config file and exclude any dark themes (or just include only 1 theme you want)

Some more details:
daisyui.com/docs/themes/

I'll give it a try by not including the "dark" theme and see if it works. Thanks.

After trying Daisy for a day I decided to just go bare bone Tailwind + Web Components. Removed Daisy.

How are you handling the JS part like interactive tabs?

I ended up having to build github.com/versoly/versoly-ui because it lacks JS otherwise I would have just used that.

You can actually build interactive tabs with daisyui without JS! relatively new addition i believe: daisyui.com/components/tab/#r… it uses a bit of radio input trickery (not sure if i am a fan, but it works)

After trying Daisy for a day I decided to just go bare bone Tailwind + Web Components. Removed Daisy.

understandable. how do web components work for you? have never used it myself

Very well actually. Syntax-wise, they are very similar to React or Vue components - so it was easy for me to pick up. I find their rendering cycles much easier to predict than React Components.

If the JS-less way Thomas mentions doesn't work for you, look into Alpine: alpinejs.dev/

Very lightweight library, so it's great for this.

A good example is that I used a landing page called Landwind for #toyboxforlaravel , which was Flowbite based, but with a tiny bit of effort I converted it to only use Alpine.

Nice. I use Petite Vue instead as it is a little smaller and the core is Vue so any problems have a google answer haha.