DaisyUI Tailwind Components React Apps

What is DaisyUI and Why It Matters for React Development

DaisyUI describes itself as a "component library for Tailwind CSS" that provides useful component class names to help developers write less code and build faster. Unlike Bootstrap or Material UI, which provide rigid design systems, daisyUI takes a fundamentally different approach: it adds semantic class names like btn, card, and modal on top of Tailwind's utility classes.

The key insight behind daisyUI is recognizing that utility-first CSS, while powerful, can lead to verbose HTML when building common UI patterns. Instead of writing dozens of utility classes for every button, daisyUI provides single-class components that you can freely customize with Tailwind utilities when needed.

Key advantages for React development:

• Consistency: All buttons in your application share the same base styles through a single class
• Maintainability: Changing the button style across your entire application requires editing one CSS rule
• Speed: Developers write less HTML without sacrificing the ability to customize
• Learning curve: New team members can recognize semantic classes faster than memorized utility combinations

DaisyUI currently ranks among the most downloaded Tailwind CSS plugins, with adoption by companies including Meta Research, Alibaba, Amazon, Adobe, and Google Cloud.

For teams building modern web applications, using DaisyUI with Tailwind CSS provides an efficient path to consistent, maintainable component styling.

Installing DaisyUI in React Applications

Setting Up a New React Project with DaisyUI

The installation process for daisyUI follows standard Tailwind CSS plugin installation:

1. Create a new React project with Vite:

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

2. Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Install daisyUI as a development dependency:

npm install -D daisyui@latest

4. Configure tailwind.config.js to include daisyUI:

export default {
 content: [
 "./index.html",
 "./src/**/*.{js,ts,jsx,tsx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [
 require('daisyui'),
 ],
}

5. Add Tailwind directives to your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

DaisyUI with Next.js

Next.js applications require the same installation steps. For the App Router (Next.js 13+), place your tailwind.config.js in the project root.

DaisyUI Component Library Overview

Form Components

Form elements are among the most commonly reused components in web applications, and daisyUI provides comprehensive coverage of form controls.

Buttons serve as the primary action element in most interfaces:

Input fields use the input class:

<input class="input" /> <!-- Default -->
<input class="input input-bordered" /> <!-- With border -->
<input class="input input-error" /> <!-- Error state -->

Select, Checkbox, Radio, and Textarea follow similar patterns with consistent sizing and styling variants.

Layout Components

Cards are a fundamental container component. The card class creates a bordered container with optional shadow styling:

<div className="card bg-base-100 w-96 shadow-xl">
 <figure>
 <img src="/images/stock/photo.jpg" alt="Shoes" />
 </figure>
 <div className="card-body">
 <h2 className="card-title">Shoes!</h2>
 <p>If a dog chews shoes whose shoes does he choose?</p>
 <div className="card-actions justify-end">
 <button className="btn btn-primary btn-sm">Buy Now</button>
 </div>
 </div>
</div>

Other layout components include:

• modal - Dialog windows with overlay and action buttons
• dropdown - Navigation or action menus
• table - Styled tables with zebra striping options
• navbar - Navigation bars with start/center/end sections
• tabs - Tab navigation with active states

Theming and Customization

Understanding DaisyUI Themes

DaisyUI comes with over 30 pre-built themes: light, dark, cupcake, bumblebee, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, and silk.

Apply a theme at the document level:

<html data-theme="cupcake">

Creating Custom Themes

Define custom themes in your tailwind.config.js:

daisyui: {
 themes: [
 {
 mytheme: {
 "primary": "#3b82f6",
 "secondary": "#8b5cf6",
 "accent": "#06b6d4",
 "neutral": "#1f2937",
 "base-100": "#ffffff",
 "base-200": "#f3f4f6",
 "base-300": "#e5e7eb",
 "info": "#3b82f6",
 "success": "#10b981",
 "warning": "#f59e0b",
 "error": "#ef4444",
 },
 },
 ],
}

DaisyUI 5 CSS Variable Architecture

Version 5 introduces CSS variable-based theming:

[data-theme="custom"] {
 --p: 221 83% 53%; /* primary */
 --s: 258 89% 66%; /* secondary */
 --a: 174 62% 56%; /* accent */
 --n: 219 14% 28%; /* neutral */
 --b1: 0 0% 100%; /* base-100 */
}

This approach enables instant runtime theme switching without JavaScript re-renders.

DaisyUI with React: Best Practices

Component Composition Patterns

Wrap daisyUI components in custom React components for consistency:

// Base button component
function Button({ variant = 'primary', size = 'md', children, ...props }) {
 return (
 <button className={`btn btn-${variant} btn-${size}`} {...props}>
 {children}
 </button>
 )
}

// Input wrapper with error handling
function FormInput({ label, error, ...props }) {
 return (
 <div className="form-control w-full">
 <label className="label">
 <span className="label-text">{label}</span>
 </label>
 <input 
 className={`input input-bordered w-full ${error ? 'input-error' : ''}`} 
 {...props} 
 />
 {error && (
 <label className="label">
 <span className="label-text-alt text-error">{error}</span>
 </label>
 )}
 </div>
 )
}

Responsive Design

Combine daisyUI classes with Tailwind responsive prefixes:

<button className="btn btn-primary w-full md:w-auto">
 Click Me
</button>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 {items.map(item => (
 <div className="card bg-base-100 shadow-lg">
 <div className="card-body">
 <h3 className="card-title text-lg">{item.title}</h3>
 <p>{item.description}</p>
 </div>
 </div>
 ))}
</div>

Dark Mode Support

Toggle themes with a simple function:

function ThemeToggle() {
 const [theme, setTheme] = useState('light')
 
 const toggleTheme = () => {
 const newTheme = theme === 'light' ? 'dark' : 'light'
 setTheme(newTheme)
 document.documentElement.setAttribute('data-theme', newTheme)
 }
 
 return (
 <button className="btn btn-primary" onClick={toggleTheme}>
 Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
 </button>
 )
}

Building component libraries with DaisyUI is a key part of our web development services that help teams deliver consistent user interfaces faster.

DaisyUI vs Other Component Libraries

Comparison with shadcn/ui

DaisyUI strengths:

• Zero runtime overhead (pure CSS)
• Smaller bundle size
• Built-in themes (30+ options)
• Faster initial setup

shadcn/ui strengths:

• Copy-paste components (no dependency)
• Full accessibility with Radix UI
• TypeScript-native
• Maximum customization

When to Use DaisyUI

DaisyUI is an excellent choice when:

• Building React applications that need consistent styling quickly
• Working within a Tailwind CSS codebase
• Needing multiple theme options (especially for multi-tenant applications)
• Prioritizing bundle size and performance
• Wanting a component library without framework lock-in

Performance Considerations

Bundle Size Impact

DaisyUI adds minimal JavaScript bundle size since it's primarily a CSS solution. The library compiles to utility-class additions in your CSS output, with no runtime JavaScript for basic functionality.

To maximize performance:

1. Ensure content paths include all source files in tailwind.config.js
2. Use specific class names rather than relying on @apply directives
3. Avoid unused components (JIT compiler removes them automatically)

export default {
 content: [
 "./index.html",
 "./src/**/*.{js,ts,jsx,tsx}",
 ],
 // ...
}

Tree Shaking and CSS Purging

Tailwind's JIT compiler automatically removes unused daisyUI classes from production builds. A project using only buttons and cards will have a smaller CSS bundle than one using the full component library.

Runtime Theme Switching

In daisyUI 5, theme switching occurs instantly without JavaScript re-renders using CSS variables:

[data-theme="dark"] {
 --primary: #3b82f6;
 /* Other variables */
}

JavaScript simply updates the data-theme attribute, and CSS variables handle the rest.

Advanced Patterns

Creating Custom DaisyUI-Like Components

For components beyond daisyUI's built-in offerings, create consistent styling using Tailwind utilities:

// A custom "chip" component
function Chip({ children, selected = false, onClick }) {
 return (
 <button 
 className={`chip ${selected ? 'chip-primary' : 'chip-ghost'}`}
 onClick={onClick}
 >
 {children}
 </button>
 )
}

// Usage in a React component
function FilterBar() {
 const [selected, setSelected] = useState('all')
 
 return (
 <div className="flex gap-2">
 <Chip 
 selected={selected === 'all'}
 onClick={() => setSelected('all')}
 >
 All
 </Chip>
 <Chip 
 selected={selected === 'active'}
 onClick={() => setSelected('active')}
 >
 Active
 </Chip>
 </div>
 )
}

DaisyUI in Design Systems

For organizations building design systems, daisyUI provides an excellent foundation:

// Design system button component
export function Button({ intent = 'primary', size = 'medium', ...props }) {
 const intentMap = {
 primary: 'btn-primary',
 secondary: 'btn-secondary',
 danger: 'btn-error',
 }
 
 const sizeMap = {
 small: 'btn-sm',
 medium: 'btn-md',
 large: 'btn-lg',
 }
 
 return (
 <button 
 className={`btn ${intentMap[intent]} ${sizeMap[size]}`}
 {...props}
 />
 )
}

Conclusion

DaisyUI offers a compelling approach to component styling in React applications built with Tailwind CSS. Its semantic class names reduce HTML verbosity while maintaining the customization flexibility that makes Tailwind powerful.

DaisyUI is particularly valuable when:

• Building React applications that need consistent styling quickly
• Working within a Tailwind CSS codebase
• Needing multiple theme options (such as user-selectable themes)
• Prioritizing bundle size and performance
• Wanting a component library without framework lock-in

With extensive theming options, framework-agnostic architecture, and production-proven stability, daisyUI deserves consideration for any React project using Tailwind CSS.

Our web development team regularly implements component libraries like DaisyUI to accelerate delivery while maintaining design consistency across client projects. Whether you're building a new React application or modernizing an existing codebase, DaisyUI provides an efficient styling foundation that scales with your needs.

Sources

1. daisyUI Official Website
2. LogRocket: daisyUI 5 What's New
3. Dev.to: daisyUI the Game-Changer