⚠️ Trigger warning: If you’re a Bootstrap devotee, grab a chamomile tea before reading this article.

Introducing Daisy UI

Daisy UI is what’s known as a component library—think reusable UI elements like buttons, inputs, and more, ready to be used across your site or app.

The goal of such a library is to save you development time while offering a customisable experience. In short: don’t reinvent the wheel, and that’s exactly the motivation behind Daisy UI.

capture d'écran du site de Daisy UI, indiquant de ne pas réinventer la roue à chaque fois (en anglais)
Mantra of every developper

Another library ?

Indeed, the frontend ecosystem has become crowded over the years: Bootstrap (often criticised), the complex Material UI, the trendy Shadcn UI, and many others. Choosing one when you want to avoid hours of building your own components can be tough.

Where Daisy UI stands out is in its balance between ease of use and freedom to customise, which is largely thanks to the fact that it’s built entirely on Tailwind CSS. And Tailwind CSS is great, provided you already have solid CSS fundamentals!

logo de Tailwind CSS

What makes Daisy UI special ?

Let’s briefly review the main options to understand why I’m such a fan of Daisy UI—and why you might be too:

  • Bootstrap: Once hugely popular, I see little reason to use it today, even for quick prototyping.
  • Material UI: Based on Google’s Material Design, it offers many components that can be customised, but customizing often takes so much time that I sometimes write pure CSS instead.
  • Shadcn UI: The new kid on the block. It’s modular (each component as a package), so you only install what you need. I’ve played with it briefly; it’s promising and could dethrone Material UI for some.

Daisy UI’s advantages

  • Built on Tailwind CSS : if you’re already familiar, adding and customising components is a breeze.
  • Lightweight : unlike heavier libraries, Daisy UI uses little to no JavaScript.
  • Framework-agnostic : it works with React, Vue, Angular, Laravel, etc., unlike Material UI which is React-only.
  • Theme management is delightfully simple and fun !

Customisation and theming

bras d'un peintre piochant une couleur dans un pot de peinture brun, d'autres pots sont présents de part et d'autre

Customisation

Since Daisy UI uses Tailwind CSS under the hood, customizing components is easy. Let’s take a CTA button for example.

Here’s the basic button provided by Daisy UI :

Bouton call to action
<a role="button" onClick={handleButtonClick}  className="btn btn-primary">{btnText}</a>

The classes btn btn-primary pull in the button component’s variables—for example, blue background color, font size, etc.

If, for example, I want to make it larger and give it a lime‑green shadow (why not?), I just add the btn-lg class (from Daisy UI), plus the corresponding Tailwind class for the shadow. Like this :

<a role="button" onClick={handleButtonClick} className="btn btn-primary btn-lg shadow-lg shadow-lime-700">{btnText}</a>

Theming

Forget your verbose themeProviders and other bulky tools to switch themes. With Daisy UI, theme switching is made ridiculously simple !

In your Tailwind config (tailwind.config.js), simply specify the theme(s) you want:

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake", "bumblebee", "synthwave", "corporate", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"],
  },
};

Or, if you’re using the new Tailwind CSS syntax in a .css file :

@plugin "daisyui" {
   themes: light --default, dark --prefersdark;
 }

Then, simply indicate the chosen theme in your HTML via the data-theme attribute :

<html data-theme="synthwave">
  <body>
    <button class="btn">Coucou</button>
  </body>
</html>

And that’s it folks !

But how do I actually switch themes ?

It’s just as simple. Add a small function to switch the theme (example in React):

const switchTheme = (theme) => {
  document.documentElement.setAttribute("data-theme", theme);
};

Then add buttons in the DOM to trigger the magic:

<button onClick={() => switchTheme("dark")}>Dark</button>
<button onClick={() => switchTheme("light")}>Light</button>

Of course, this is a basic example, but the logic is right there!

Bonus: create your own theme ! 🌈

You have two ways to create a custom Daisy UI theme :

Conclusion & personal experience

I admit I’m a supporter of the “Do it yourself” approach when it comes to building UI components, even if it means spending hours creating prototypes and writing CSS by hand. But quite often, I end up with results that are very close to what most libraries already offer. Which isn’t surprising, since these components follow well-established UX/UI rules. You can’t really go wild creatively with reusable components, especially since they often enable critical interactions on your site or app (a poorly placed CTA that’s too subtle, and you’ll lose conversions).

But we often discover this type of library through the lens of Bootstrap or Material UI, which tends to give us a distorted view of them, or worse, puts us off from using them altogether. That was my case for a long time, until I discovered more user-friendly libraries like Daisy UI and Shadcn UI, which I’ve tried a bit and which share a similar philosophy!

In my opinion, these libraries help save time on projects where efficiency and functionality matter more than artistic flair. Just like Tailwind will never replace a fully custom stylesheet for a creative developer site. But for everything else, these libraries are assets that shouldn’t be overlooked in your stack; except for Bootstrap 😊