OSS Tanbou

daisyUI — add semantic component classes and themes on top of Tailwind CSS

About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
42,440
Primary language
JavaScript
License
MIT
Repository last updated
Sep 18, 2026

Overview

daisyUI is a Tailwind CSS component library that provides classes for buttons, cards, modals, and other UI patterns plus configurable themes. It is used through HTML classes rather than a framework-specific component runtime.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Add semantic component classes to Tailwind CSS

Classes such as btn and card package common UI styling so markup does not need to repeat long utility lists everywhere.

Sources: [2][3]

Switch themes through shared CSS variables

Built-in and custom themes can change visual tokens while preserving the same component markup.

Sources: [2][3]

For teams that want Tailwind utilities plus reusable component styling

It fits projects that want fast component-level styling without coupling the UI layer to a specific JavaScript framework.

Sources: [2]

Match the daisyUI setup to the Tailwind CSS major version

The daisyUI 5 Vite guide targets Tailwind CSS 4. Avoid mixing older Tailwind and daisyUI configuration examples into the current setup.

Sources: [3]

Official sources

  1. [1]saadeghi/daisyui repository(2026-09-21)
  2. [2]daisyUI README(2026-09-21)
  3. [3]daisyUI Vite installation(2026-09-21)
  4. [4]daisyUI package(2026-09-21)
  5. [5]daisyUI MIT license(2026-09-21)
Supplemental curator note

daisyUI is not a React- or Vue-specific component runtime. It extends Tailwind CSS with semantic classes such as `btn` and `card` plus themes. The current release is 5.7.42, and the official Vite setup uses Tailwind CSS 4's Vite plugin plus `@plugin "daisyui"`.

Try it in 3 steps

  1. 1

    Install Tailwind CSS 4 and daisyUI

    Follow the daisyUI 5 Vite installation path.

    npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
  2. 2

    Configure the Vite and CSS plugins

    Enable the Tailwind Vite plugin and load the daisyUI plugin from CSS.

    vite: tailwindcss() / CSS: @import "tailwindcss"; @plugin "daisyui";
  3. 3

    Try a component class

    Render a semantic component class and verify the active theme and component styling.

    <button className="btn btn-primary">Button</button>
Check the official README

Growth

Growth trends · Last 30 days

42,440 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
62
Open PRs
34

Development activity is still being collected.

Built with

Categories and tags

GitHub data

GitHub dataView detailed GitHub data

GitHub Topics

  • tailwind-css
  • ui-library
  • design-system
  • ui-pattern
  • ui-framework
  • css-components
  • css-framework
  • ui-kit
  • ui-design
  • design-systems
  • tailwind
  • css
Stars
42,440
Forks
1,691
Watchers
168
Open issues
18
Contributors
306
Primary language
JavaScript
License
MIT
Repository last updated
Sep 18, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.