Skip to content

Latest commit

 

History

History
139 lines (116 loc) · 2.16 KB

daisyui.md

File metadata and controls

139 lines (116 loc) · 2.16 KB

Overview

DaisyUI is a popular Tailwind CSS component library that adds semantic component class names to Tailwind CSS. It's purely CSS-based with zero JavaScript dependencies, making it framework-agnostic.

Features

  • Pure CSS: No JavaScript required
  • Tailwind Plugin: Extends Tailwind CSS
  • Semantic Classes: Component-based class names
  • Framework Agnostic: Works with React, Vue, Svelte, HTML
  • Themeable: 30+ built-in themes
  • Customizable: Easy theme customization
  • RTL Support: Right-to-left language support
  • Free & Open Source: MIT licensed

Components

Actions

  • Button
  • Dropdown
  • Modal
  • Swap
  • Theme Controller

Data Display

  • Accordion
  • Avatar
  • Badge
  • Card
  • Carousel
  • Chat Bubble
  • Collapse
  • Countdown
  • Diff
  • Kbd
  • Stat
  • Table
  • Timeline

Data Input

  • Checkbox
  • File Input
  • Radio
  • Range
  • Rating
  • Select
  • Text Input
  • Textarea
  • Toggle

Layout

  • Artboard
  • Divider
  • Drawer
  • Footer
  • Hero
  • Indicator
  • Join
  • Mask
  • Stack

Navigation

  • Breadcrumbs
  • Bottom Navigation
  • Link
  • Menu
  • Navbar
  • Pagination
  • Steps
  • Tab

Feedback

  • Alert
  • Loading
  • Progress
  • Radial Progress
  • Skeleton
  • Toast
  • Tooltip

Theming

Built-in Themes

30+ professional themes including:

  • Light, Dark
  • Cupcake, Bumblebee
  • Corporate, Business
  • Cyberpunk, Retro
  • And many more

Custom Themes

Easy theme creation with CSS variables:

[data-theme="mytheme"] {
  --p: 259 94% 51%;
  --s: 314 100% 47%;
  ...
}

Usage

<button class="btn btn-primary">Button</button>
<div class="card">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
  </div>
</div>

Advantages

  • Cleaner HTML with semantic classes
  • No JavaScript bundle overhead
  • Extremely customizable
  • Great for rapid prototyping
  • Consistent design language
  • Excellent documentation

Integration

Works with:

  • React (any framework)
  • Vue
  • Svelte
  • Next.js
  • Astro
  • Plain HTML

Comparison

  • vs Shadcn/UI: DaisyUI is CSS-only, Shadcn is copy-paste React components
  • vs Tailwind UI: Free vs paid
  • vs Bootstrap: More modern, Tailwind-based

Pricing

Free and open-source under the MIT license.