← Home
DaisyUI Demo

Welcome to DaisyUI

DaisyUI adds component classes to Tailwind CSS. Instead of writing 10+ utility classes, you write one semantic class name like btn or card.

Why Use DaisyUI?

Without DaisyUI

<button class="
  inline-flex items-center
  justify-center rounded-lg
  bg-blue-600 px-4 py-2
  text-sm font-medium
  text-white shadow-sm
  hover:bg-blue-700
  focus:outline-none
  focus:ring-2
  focus:ring-blue-500
">
  Click me
</button>

10+ classes just for one button!

With DaisyUI

<button class="btn btn-primary">
  Click me
</button>

Just 2 classes! Clean and readable.

Buttonsbtn + modifier classes

Sizes
Variants

Cardscard + card-body

Basic Card

Simple card with just text content.

With Image

Cards can have figures/images!

With Actions

Cards can have buttons too.

Badges & Alertsbadge, alert

DefaultPrimarySecondaryAccentGhostOutline
ℹ️ This is an info alert — check it out!
✅ Your purchase has been confirmed!
⚠️ Warning: Invalid email address!
❌ Error: Task failed successfully.

Form Inputsinput, select, checkbox, toggle

Ratingrating + radio inputs

You selected: 3 stars

Range Sliderrange

50%

Progress & Loadingprogress, loading

Loading Spinners

Modalmodal + dialog element

Hello! 👋

This is a DaisyUI modal. It's great for confirmations, forms, or displaying additional content without leaving the page.

Tabstabs + tab

Tab 1Tab 2Tab 3
BorderedTabsStyle
LiftedTabsStyle

Avatars & Masksavatar, mask

AB

30+ Built-in Themesdata-theme attribute

Change the data-theme attribute at the top of this page to try different themes!

lightdarkcupcakebumblebeeemeraldcorporatesynthwaveretrocyberpunkvalentinehalloweengardenforestaqualofipastelfantasywireframeblackluxurydraculacmykautumnbusinessacidlemonadenightcoffeewinter

Statsstats + stat

Total Likes
25.6K
21% more than last month
Page Views
2.6M
14% more than last month
Tasks Done
86%
↗︎ 12 tasks completed