daisyui

daisyUI 5 - The Tailwind CSS Component Library

weekly downloads593K

versionv5.5.18

licenseMIT

categoryui-library

daisyuitailwindtailwindcsstailwind csstailwind reacttailwind vuetailwind plugintailwind componenttailwind nexttailwind nuxttailwind sveltetailwind css plugintailwind astrotailwind laraveltailwind railsreactcssuivuecomponentframeworknextjsfront-endlaravelthemenuxtsvelteastrocomponent librarycss library

Overview

daisyUI is a Tailwind CSS plugin that provides pre-built UI components as semantic CSS class names, serving as a high-level abstraction over Tailwind's utility classes. With over 590,000 weekly downloads, it addresses the verbosity of utility-first CSS by offering component-oriented classes like btn, card, and modal that eliminate repetitive markup patterns.

The package functions purely as CSS, requiring no JavaScript runtime, which makes it framework-agnostic and suitable for React, Vue, Svelte, Next.js, Nuxt, or vanilla HTML projects. Unlike component libraries that ship JavaScript code, daisyUI generates styles at build time through Tailwind's plugin system, allowing proper CSS purging and minimal production bundle sizes.

Developed as an open-source project under the MIT license, daisyUI includes 50+ components with multiple variants for size, color, and state. It ships with 30+ built-in themes and supports extensive customization through CSS variables at both global and component levels. The library maintains Tailwind's utility-first philosophy while reducing the boilerplate needed for common UI patterns.

daisyUI solves the practical problem of Tailwind markup becoming unwieldy in production applications. Instead of writing <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"> repeatedly, developers write <button class="btn btn-primary">, with full ability to override styles using standard Tailwind utilities when needed.

Quick Start

typescript

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      'light',
      'dark',
      {
        custom: {
          'primary': '#0066cc',
          'secondary': '#7c3aed',
          'accent': '#f59e0b',
          'neutral': '#2a323c',
          'base-100': '#ffffff',
        },
      },
    ],
  },
};

// React component example
import { useState } from 'react';

export function ProductCard() {
  const [loading, setLoading] = useState(false);

  const handleAddToCart = async () => {
    setLoading(true);
    await new Promise(resolve => setTimeout(resolve, 1000));
    setLoading(false);
  };

  return (
    <div className="card w-96 bg-base-100 shadow-xl">
      <figure>
        <img src="https://placehold.co/400x300" alt="Product" />
      </figure>
      <div className="card-body">
        <h2 className="card-title">
          Wireless Headphones
          <div className="badge badge-secondary">NEW</div>
        </h2>
        <p>Premium noise-cancelling headphones with 30-hour battery life.</p>
        <div className="card-actions justify-end items-center mt-4">
          <div className="text-2xl font-bold">$299</div>
          <button 
            className={`btn btn-primary ${loading ? 'btn-disabled' : ''}`}
            onClick={handleAddToCart}
          >
            {loading && <span className="loading loading-spinner"></span>}
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

Use Cases

Rapid prototyping and MVPs: Build functional interfaces quickly without custom CSS. The semantic component classes allow designers and developers to iterate on layouts and features without bikeshedding utility class combinations.

Design system foundations: Establish consistent UI patterns across large applications or multiple projects. Teams can define custom themes with brand colors and spacing, then distribute a shared daisyUI configuration that enforces visual consistency.

Multi-framework organizations: Companies using different frontend frameworks (React dashboards, Vue marketing sites, Svelte tools) can maintain visual consistency with a single CSS-based component library rather than maintaining parallel JavaScript component libraries.

Server-rendered applications: Laravel, Rails, Django, or PHP applications benefit from pure CSS components that don't require a JavaScript build pipeline. The standalone ESM module allows integration without npm or Node.js.

Accessible baseline implementations: Components include ARIA attributes and keyboard navigation patterns out of the box. Teams can start with accessible foundations rather than implementing from scratch, though complex interactions still require custom JavaScript.

Pros & Cons

Pros

+Zero JavaScript runtime overhead — purely CSS-based components that work with any framework or vanilla HTML
+Excellent DX with semantic class names that drastically reduce markup verbosity compared to pure Tailwind utilities
+Comprehensive theming system with 30+ built-in themes and CSS variable customization at component and global levels
+Proper CSS purging when installed as a plugin, resulting in minimal production bundle sizes despite large component library
+Strong accessibility defaults with ARIA attributes and keyboard navigation built into component markup patterns

Cons

−Limited to presentational components — interactive behaviors like dropdowns, modals, and tabs require custom JavaScript implementation
−Less customization flexibility than copying code directly (shadcn/ui approach) since you're working with pre-compiled CSS classes
−CDN usage prevents tree-shaking and ships full library (~242KB), making the npm plugin method essentially required for production
−Component API changes between major versions can require migration effort in larger codebases
−Class name conflicts possible if using other CSS frameworks or custom component libraries alongside daisyUI

Install

bash

npm install daisyui

bash

pnpm add daisyui

bash

bun add daisyui

Overview

Quick Start

typescript

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      'light',
      'dark',
      {
        custom: {
          'primary': '#0066cc',
          'secondary': '#7c3aed',
          'accent': '#f59e0b',
          'neutral': '#2a323c',
          'base-100': '#ffffff',
        },
      },
    ],
  },
};

// React component example
import { useState } from 'react';

export function ProductCard() {
  const [loading, setLoading] = useState(false);

  const handleAddToCart = async () => {
    setLoading(true);
    await new Promise(resolve => setTimeout(resolve, 1000));
    setLoading(false);
  };

  return (
    <div className="card w-96 bg-base-100 shadow-xl">
      <figure>
        <img src="https://placehold.co/400x300" alt="Product" />
      </figure>
      <div className="card-body">
        <h2 className="card-title">
          Wireless Headphones
          <div className="badge badge-secondary">NEW</div>
        </h2>
        <p>Premium noise-cancelling headphones with 30-hour battery life.</p>
        <div className="card-actions justify-end items-center mt-4">
          <div className="text-2xl font-bold">$299</div>
          <button 
            className={`btn btn-primary ${loading ? 'btn-disabled' : ''}`}
            onClick={handleAddToCart}
          >
            {loading && <span className="loading loading-spinner"></span>}
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

Use Cases

Pros & Cons

Pros

+Zero JavaScript runtime overhead — purely CSS-based components that work with any framework or vanilla HTML
+Excellent DX with semantic class names that drastically reduce markup verbosity compared to pure Tailwind utilities
+Comprehensive theming system with 30+ built-in themes and CSS variable customization at component and global levels
+Proper CSS purging when installed as a plugin, resulting in minimal production bundle sizes despite large component library
+Strong accessibility defaults with ARIA attributes and keyboard navigation built into component markup patterns

Cons

−Limited to presentational components — interactive behaviors like dropdowns, modals, and tabs require custom JavaScript implementation
−Less customization flexibility than copying code directly (shadcn/ui approach) since you're working with pre-compiled CSS classes
−CDN usage prevents tree-shaking and ships full library (~242KB), making the npm plugin method essentially required for production
−Component API changes between major versions can require migration effort in larger codebases
−Class name conflicts possible if using other CSS frameworks or custom component libraries alongside daisyUI