Skip to content
devcards.space
Frontend

What is daisyUI? Build UIs Faster with Tailwind Components

Layer prebuilt components and a theming system on top of Tailwind utilities with daisyUI. Practical guide to setup, the Vite plugin and example components.

5 minute read
daisyUI infographic: a Tailwind-based component plugin showing setup and theming across 12 sections

daisyUI is the official component plugin built on top of Tailwind CSS. It preserves all the flexibility of Tailwind utilities while providing short, readable class names for common components — buttons, cards, modals — and lets you switch among dozens of themes with a single line. This guide walks through the infographic and shows how to install and use it on a React + Vite stack.

What is daisyUI?

A Tailwind CSS plugin that ships ready-made component classes. Semantic classes like btn, card, modal and alert combine with Tailwind utilities so you don't have to invent a design system from scratch.

  • Tailwind-based component plugin
  • Predefined components
  • Works with Tailwind, doesn't replace it
  • React, Vue, HTML — framework agnostic

Why Use daisyUI?

Tailwind has you write everything from scratch — efficient on small projects but tiring in large teams where the same class combinations repeat everywhere. daisyUI absorbs that repetition into semantic classes.

  • Makes Tailwind faster
  • Built-in theming (light/dark + 30+ themes)
  • Fully compatible with Tailwind utilities
  • Dark mode ready out of the box
  • Less custom CSS to write

Setup: React + Vite

Bootstrap a React + Vite project with the official template. We'll add daisyUI on top.

bash
npm create vite@latest my-app -- --template react
cd my-app
npm install

Install Tailwind + daisyUI

Install Tailwind CSS and add daisyUI as a plugin.

bash
npm install -D tailwindcss @tailwindcss/vite daisyui@latest

Configure the Vite Plugin

Add the Tailwind plugin to your Vite config; daisyUI is consumed by Tailwind automatically.

vite.config.ts
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Add daisyUI to CSS

Use Tailwind v4 @plugin syntax to enable daisyUI. This single line pulls in themes and component classes.

src/index.css
css
@import "tailwindcss";
@plugin "daisyui";

Example Button

btn provides the base button style, btn-primary picks a variant color, btn-outline gives the outlined version. Mix and match for any combination you need.

tsx
<button className="btn btn-primary">
  Click me
</button>

<button className="btn btn-outline btn-secondary">
  Outline
</button>

List Component

menu provides a list optimized for navigation. Wrap with the base class and drop li/a inside to build a sidebar in minutes.

tsx
<ul className="menu bg-base-200 rounded-box w-56">
  <li><a>Dashboard</a></li>
  <li><a>Projects</a></li>
  <li><a>Tasks</a></li>
  <li><a>Settings</a></li>
</ul>

Key Features

What daisyUI brings out of the box:

  • Semantic class names (btn, card, modal)
  • 30+ ready themes (cupcake, dracula, forest, …)
  • Full Tailwind utility compatibility
  • Dark mode ready
  • Component variants and sizes

Themes

Just provide a theme list to the CSS plugin line. You can switch at runtime via the data-theme attribute.

html
<html data-theme="dracula">
  <body>...</body>
</html>

Use Cases

Where daisyUI shines:

  • Admin panels and dashboards
  • MVPs and rapid prototypes
  • Internal tools and B2B apps
  • Marketing/onboarding pages of SaaS products

Summary

daisyUI accelerates the Tailwind experience, lets you write less code and helps you maintain a consistent design system. It adds component ergonomics without sacrificing Tailwind's freedom — especially good for fast iteration and MVPs.

Frequently Asked Questions

Common questions about this topic.

Does daisyUI replace Tailwind?

No, it's a Tailwind plugin layered on top. You still use all Tailwind utilities — daisyUI just gives semantic names to common combinations.

How is it different from shadcn/ui?

shadcn/ui ships Radix-based headless components you copy into your project. daisyUI is a pure CSS class library. shadcn is more flexible/accessible; daisyUI is faster to set up and framework-agnostic.

How many themes are there?

30+ official themes. You can define your own in the themes config or override CSS variables. Light/dark can hook automatically into prefers-color-scheme.

Does it bloat my bundle?

When Tailwind's content config is correct, only the classes you use end up in the bundle. daisyUI's overall footprint is small; theme CSS variables take minimal space.

Does it work with React Native?

No — daisyUI is pure CSS, so it doesn't apply to RN. For React Native, look at NativeWind, Tamagui or Restyle.

Related Posts

Other infographics on connected topics.

Discover more developer infographics

Visit the homepage so you don't miss new content.

See all infographics