DaisyUI is the most popular, free and open-source component library for Tailwind CSS. It provides a comprehensive collection of semantic HTML components with built-in theme support, making it simple to build beautiful, consistent interfaces without writing custom CSS. DaisyUI extends Tailwind CSS with over 50 ready-to-use components and 37 themes while maintaining full compatibility with Tailwind's utility-first approach.
npm install daisyuiimport daisyui from 'daisyui';For accessing individual utilities:
import themeOrder from 'daisyui/functions/themeOrder';
import variables from 'daisyui/functions/variables';
import { addPrefix } from 'daisyui/functions/addPrefix';
import { plugin } from 'daisyui/functions/plugin';
import { pluginOptionsHandler } from 'daisyui/functions/pluginOptionsHandler';DaisyUI is used as a Tailwind CSS plugin. Add it to your Tailwind configuration:
module.exports = {
content: ['./src/**/*.{html,js}'],
plugins: [
require('daisyui')
],
daisyui: {
themes: ["light", "dark", "cupcake"],
prefix: "",
logs: true
}
}Use components in your HTML with semantic class names:
<!-- Button component -->
<button class="btn btn-primary">Primary Button</button>
<!-- Card component -->
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>Card content goes here</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Action</button>
</div>
</div>
</div>
<!-- Theme switching -->
<input type="checkbox" value="dark" class="toggle theme-controller" />DaisyUI is built around several key concepts:
Core plugin configuration options for customizing DaisyUI behavior, theme selection, and component inclusion.
interface PluginOptions {
themes?: string[] | string | "all";
prefix?: string;
logs?: boolean;
include?: string[];
exclude?: string[];
root?: string;
}Complete theming system with 37 built-in themes, custom theme creation, and dynamic theme switching.
const themeOrder: readonly string[];
const variables: {
colors: {
[key: string]: string;
};
borderRadius: {
[key: string]: string;
};
};Comprehensive form components including inputs, buttons, checkboxes, selects, and specialized form elements.
<!-- Button variants -->
<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<!-- Input variants -->
<input type="text" class="input input-bordered" />
<input type="text" class="input input-bordered input-primary" />
<!-- Form controls -->
<input type="checkbox" class="checkbox" />
<input type="radio" class="radio" />
<select class="select select-bordered">
<option>Option 1</option>
</select>Navigation and menu components including navbars, menus, breadcrumbs, tabs, and step indicators.
<!-- Navbar -->
<div class="navbar bg-base-100">
<div class="navbar-start">
<a class="btn btn-ghost text-xl">Brand</a>
</div>
<div class="navbar-end">
<button class="btn">Button</button>
</div>
</div>
<!-- Menu -->
<ul class="menu bg-base-200 w-56 rounded-box">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>Layout and structural components including cards, heroes, dividers, grids, and container elements.
<!-- Card -->
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Title</h2>
<p>Content</p>
</div>
</div>
<!-- Hero -->
<div class="hero min-h-screen bg-base-200">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Hello there</h1>
</div>
</div>
</div>Components for displaying data including tables, statistics, badges, avatars, and progress indicators.
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
</tr>
</tbody>
</table>
<!-- Stats -->
<div class="stats shadow">
<div class="stat">
<div class="stat-title">Downloads</div>
<div class="stat-value">31K</div>
</div>
</div>User feedback components including alerts, modals, tooltips, loading states, and toast notifications.
<!-- Alert -->
<div class="alert alert-info">
<span>Info alert</span>
</div>
<!-- Modal -->
<dialog class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
<p class="py-4">Press ESC key or click outside to close</p>
</div>
</dialog>Additional utility classes for special effects, joins, typography, and layout enhancements.
<!-- Glass effect -->
<div class="glass">Glass morphism effect</div>
<!-- Join elements -->
<div class="join">
<button class="btn join-item">1</button>
<button class="btn join-item">2</button>
</div>Advanced JavaScript utility functions for programmatic DaisyUI plugin usage, CSS prefix management, and plugin configuration handling.
// CSS prefix utility for adding prefixes to CSS objects
function addPrefix(
obj: Record<string, any>,
prefix: string,
excludedPrefixes?: string[]
): Record<string, any>;
// Plugin creation utility with options support
const plugin: {
withOptions: (
pluginFunction: (options: any) => any,
configFunction?: (options: any) => any
) => any;
};
// Plugin options handler for processing configuration
function pluginOptionsHandler(
options: PluginOptions | undefined,
addBase: Function,
themesObject: Record<string, any>,
packageVersion: string
): {
include?: string[];
exclude?: string[];
prefix: string;
};// Theme names
type ThemeName =
| "light" | "dark" | "cupcake" | "bumblebee" | "emerald" | "corporate"
| "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" | "silk";
// Plugin configuration
interface PluginOptions {
themes?: ThemeName[] | string | "all";
prefix?: string;
logs?: boolean;
include?: string[];
exclude?: string[];
root?: string;
}
// Variables interface
interface Variables {
colors: {
"base-100": string;
"base-200": string;
"base-300": string;
"base-content": string;
"primary": string;
"primary-content": string;
"secondary": string;
"secondary-content": string;
"accent": string;
"accent-content": string;
"neutral": string;
"neutral-content": string;
"info": string;
"info-content": string;
"success": string;
"success-content": string;
"warning": string;
"warning-content": string;
"error": string;
"error-content": string;
};
borderRadius: {
"selector": string;
"field": string;
"box": string;
};
}
// Utility function types
interface PluginUtility {
withOptions: <T = any>(
pluginFunction: (options?: T) => (tailwind: any) => void,
configFunction?: (options?: T) => any
) => any;
}
interface PluginOptionsResult {
include?: string[];
exclude?: string[];
prefix: string;
}
declare function addPrefix(
obj: Record<string, any>,
prefix: string,
excludedPrefixes?: string[]
): Record<string, any>;
declare function pluginOptionsHandler(
options: PluginOptions | undefined,
addBase: (styles: Record<string, any>) => void,
themesObject: Record<string, any>,
packageVersion: string
): PluginOptionsResult;
declare const plugin: PluginUtility;