or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display-components.mdfeedback-components.mdform-components.mdindex.mdjavascript-utilities.mdlayout-components.mdnavigation-components.mdplugin-configuration.mdtheme-system.mdutility-classes.md
tile.json

tessl/npm-daisyui

The most popular, free and open-source component library for Tailwind CSS

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/daisyui@5.1.x

To install, run

npx @tessl/cli install tessl/npm-daisyui@5.1.0

index.mddocs/

DaisyUI

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.

Package Information

  • Package Name: daisyui
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install daisyui

Core Imports

import 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';

Basic Usage

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" />

Architecture

DaisyUI is built around several key concepts:

  • Tailwind CSS Plugin: Extends Tailwind with semantic component classes
  • Component System: 56+ semantic components covering forms, navigation, data display, and layout
  • Theme System: 37 built-in themes with CSS custom properties for easy customization
  • Utility Integration: Full compatibility with Tailwind utilities for customization
  • Semantic Classes: Human-readable class names that map to utility combinations
  • Responsive Support: Components work with Tailwind's responsive prefixes

Capabilities

Plugin Configuration

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;
}

Plugin Configuration

Theme System

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;
  };
};

Theme System

Form Components

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>

Form Components

Navigation Components

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>

Navigation Components

Layout Components

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>

Layout Components

Data Display Components

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>

Data Display Components

Feedback Components

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>

Feedback Components

Utility Classes

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>

Utility Classes

JavaScript Utilities

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;
};

JavaScript Utilities

Types

// 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;