daisyui.com Open in urlscan Pro
2606:4700:3030::6815:1822  Public Scan

Submitted URL: http://daisyui.com/
Effective URL: https://daisyui.com/
Submission: On January 04 via api from US — Scanned from DE

Form analysis 2 forms found in the DOM

<form data-svelte-search=""><label id="typeahead-0.0ocvc63hpcmq-label" for="typeahead-0.0ocvc63hpcmq" class="svelte-wqugyy">Search</label> <input name="search" type="search" placeholder="Search…" autocomplete="off" spellcheck="false"
    aria-autocomplete="list" aria-controls="typeahead-0.0ocvc63hpcmq-listbox" aria-labelledby="typeahead-0.0ocvc63hpcmq-label" id="typeahead-0.0ocvc63hpcmq" class="svelte-wqugyy"></form>

Name: mc-embedded-subscribe-formPOST https://gmail.us8.list-manage.com/subscribe/post?u=42813cff910e47b1bd132369a&id=9fd7333f07&f_id=003d03e0f0

<form action="https://gmail.us8.list-manage.com/subscribe/post?u=42813cff910e47b1bd132369a&amp;id=9fd7333f07&amp;f_id=003d03e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate=""> <input
    type="checkbox" name="group[347002][8]" value="1" class="hidden" checked=""> <input type="checkbox" name="group[347002][1]" value="1" class="hidden" checked=""> <input type="checkbox" name="group[347002][2]" value="1" class="hidden" checked="">
  <input type="checkbox" name="group[347002][4]" value="1" class="hidden" checked=""> <input type="checkbox" name="group[347002][16]" value="1" class="hidden" checked="">
  <div class="form-control w-full max-w-sm"><label class="label" for="mce-EMAIL">
      <div class="label-text">Enter your email address <div class="label-text text-base-content/70 text-xs">to get updates, news and discounts</div>
      </div>
    </label>
    <div class="join"><input type="email" autocomplete="email" name="EMAIL" class="join-item input input-bordered w-full max-w-sm" id="mce-EMAIL" placeholder="mail@site.com" required=""> <button name="subscribe"
        class="join-item btn btn-neutral">Subscribe</button></div>
  </div>
  <div aria-hidden="true" class="hidden"><input type="text" name="b_42813cff910e47b1bd132369a_9fd7333f07" tabindex="-1" value=""></div>
</form>

Text Content

daisyUI
4.5.0
 * Changelog
 * 
 * Version 3.x
 * Version 2.x
 * Version 1.x
 * 
 * Roadmap

Search
ctrl K
Components
Theme
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
Make your theme!
 * AR عربي beta
 * EN English
 * ES Español
 * FA فارسی beta
 * FR Français
 * ID Indonesia
 * IT Italiano
 * JA 日本語
 * KO 한국어
 * MS Melayu
 * PL Polski
 * PT Português
 * RU Русский
 * UK Українська
 * VI Vietnamese
 * ZH 中文
 * ZH 繁體中文

npm i -D daisyui

daisyUI 4 upgrade guide



THE MOST POPULAR
COMPONENT LIBRARY
FOR TAILWIND CSS



daisyUI adds component class names to Tailwind CSS
so you can make beautiful websites faster than ever.


See components Components How to use?



DON'T RE-INVENT
THE WHEEL
EVERY TIME

In a Tailwind CSS project, you need to write utility class names for every
element. Thousands of class names just to style the most basic elements.




INSTEAD OF WRITING
100 CLASS NAMES



For every element, every page, every project,
again and again…




USE SEMANTIC
CLASS NAMES



It's descriptive, faster, cleaner and easier to maintain.


Features Links Message
Faster development
Cleaner HTML
Customizable
Themeable
Pure CSS
Pure CSS.
No JS dependency
Works on all frameworks


DESIGN SYSTEM

checkbox-xs checkbox-sm checkbox-md checkbox-lg
radio-xs radio-sm radio-md radio-lg


SEMANTIC COLORS

primary
secondary
accent
neutral
info
success
warning
error


// Styling a simple button

<button class="">
  Tailwind Button
</button>

// Result:
Tailwind Button
Entfalte euer Produktivitätspotenzial mit 50% Rabatt auf die ersten 3 Monate
Slack Pro. ads via Carbon


TAKE TAILWIND CSS
TO THE NEXT LEVEL

daisyUI adds class names to Tailwind CSS
for all common UI components.
Class names like btn , card , toggle and many more.



This allows us to focus on important things
instead of styling basic elements for every project.


See All Components


NO MORE UGLY HTML

Write fewer class names
Use component class names
modify them using Tailwind CSS utilities.


Click
Tailwind only

Tailwind + daisyUI

<div class="w-80 rounded-2xl bg-gray-100">
  <div class="flex flex-col gap-2 p-8">
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
    <label class="flex cursor-pointer items-center justify-between p-1">
      Accept terms of use
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
        <span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <label class="flex cursor-pointer items-center justify-between p-1">
      Submit to newsletter
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
        <span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>
  </div>
</div>

→ ↓
Accept terms of use

Submit to newsletter Save


FEWER CLASS NAMES
FASTER DEVELOPMENT
SMALLER FILE SIZE



With daisyUI, you write 80% fewer class names
And your HTML size will be about 70% smaller.


Get started


CSS CLASS NAMES

Tailwind only 107
Tailwind + daisyUI 14
86% fewer class names


HTML SIZE

Tailwind only 1884 byte
Tailwind + daisyUI 471 byte
74% smaller DOM size


HIGHLY CUSTOMIZABLE
POWERED BY TAILWIND CSS UTILITY CLASSES



daisyUI is built on top of Tailwind CSS so you can customize everything using
utility classes.


How to customize

<a class="btn btn-primary">Button</a>

↓

<a class="btn btn-primary rounded-full">Button</a>


PURE CSS.
FRAMEWORK AGNOSTIC.
WORKS EVERYWHERE.



daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't
need a JS bundle file.

Install daisyUI as a dev dependency and use the class names just like any other
Tailwind CSS class name.


How to use?

 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors
 * 
 * 
 * 
 * 
 * 
 * 

 * Admin panel
 * Dashboard
 * Notifications
 * Messages
 * People
 * Products 50

Neutral Primary Secondary Accent Info Success Warning Error
 * Inbox 99+
 * Updates NEW
 * Stats

Unlimited themes

with zero effort



daisyUI adds a set of customizable color names to Tailwind CSS and these new
colors use CSS variables for the values. Using daisyUI color names, you get Dark
Mode and even more themes without adding a new class name.


See all themes

Semantic colors
primary
secondary
accent
neutral
primary content
secondary content
accent content
neutral content
base 100
base 200
base 300
base content
info
success
warning
error
info content
success content
warning content
error content
Learn more about colors


APPLY YOUR OWN DESIGN DECISIONS

Your website should be unique. Create a custom theme for yourself using daisyUI
theme generator. The colors you pick will be applied to all daisyUI components.


Theme Generator Learn more about themes


55 COMPONENTS
500+ UTILITY CLASSES
ENDLESS POSSIBILITIES ENDLESS POSSIBILITIES

Mix and match daisyUI class names to create unique web pages.


See All Components


DAISYUI IS THE MOST POPULAR
COMPONENT LIBRARY FOR TAILWIND CSS


22,539 28,174
GitHub Stars
129,420 161,775
open-source projects using daisyUI
7,904,756 9,880,945
NPM Installs
Dev Ed
Content Creator

Been using daisyUI for a while and I must say...such a fun addon for Tailwind
CSS, well done 🔥

Marc Lou
Solopreneur

If you want to build beautiful apps in no time, daisyUI is the way to go ✨ I've
been using it for the past 6 months and can't imagine living without it...

Sara Vieira
Developer at axo.dev

It's great! Been using it in all my projects!

Cyris
Software Engineer

daisyUI is amazing and I use it for all my projects

TiiaAurora
Tech journalist

We use daisyUI + Tailwind with our projects. It has been extremly helpful
building websites fast and give us a red design line through several different
projects.

Ollie The Dev
Amplify UI, texttodesign.ai

daisyUI is such a time saver

Scott Spence
SvelteSociety London events organiser

If you use Tailwind and want prepackaged components then I wholeheartedly
recommend daisyUI! An awesome set of defaults that's super configurable 🔥

borislav grigorov
Indiehacker

daisyui is awesome!

Rem Kim
Founder of resolveai.co

I'm glad I found daisyUI. daisyUI is built with Tailwind CSS which makes it
perfect fit for me.

Mazipan
Software developer

Using daisyui feels like using the old Bootstrap but with the additional power
of Tailwind's customization.

Ese Monday
React.js Developer

I use daisyUI.

Christophe Anfry
Ex Google Workspace technical support

I recommend you to use DaisyUi on top of Tailwind they work together and gives
more possibilities and ease.

Bonnie
Technical Writer

I found Tailwind CSS complicated, but daisyUI looks like something I can give a
try.

Marc Lou
HabitsGarden, Landing-AI, IndiePa.ge

If you try daisyUI, there is no turning back... 😏

Daniel Kelly
Teacher/Content Creator at vueschool.io

daisyUI is awesome!

Jiří Kratochvíl
vuejs.berlin co-organizer

Honestly, I spent like 20% of my time writing code and 80% of time playing with
Tailwind CSS and daisyUI. Really love the daisyUI themes 😍

Chris Tankersley
PHP Developer, Writer, Speaker, and Teacher

While I love the flexibility of Tailwind CSS, I always find myself configuring
re-usable styles as I hammer out a visual concept. daisyUI made doing that a lot
easier today.

Loftwah
DevOps Engineer

I love daisyUI and we used it for a hackathon project last week

lang
Software developer

I would have never touched tailwindcss if it wasn't for DaisyUI 🤗

Pramod
Software developer

DaisyUI is what I use for everything now.

Tiago Bastos
Software developer

I like to use Tailwind+DaisyUI to have a Bootstrap like experience.

Thomas Mol
Maker

Have been using DaisyUI and it works great!

Jairon Landa
Software developer

If you want to create a quick MVP for your next project, I recommend DaisyUI. It
offers a simple and elegant design.✨

Alexander Thomsen
Founder of moonbit.ai

I'm enjoying daisyUI

Jagdish kashyap
Software developer

I was using bootstrap first than switched to tailwind but there's so many
classes too much code, than i found daisyUI. if anyone coming from bootstrapcss
background you will love daisyui for sure. 🙌

Josh Cirre
Entrepreneur

DaisyUI really makes it super easy to get a clean looking MVP up and out the
door.

Joel Pickin
Software developer

Why did it take me so long to pair Tailwind with DaisyUI… Now I feel like a 10X
developer.


FREE AND OPEN-SOURCE
BUILT BY THE COMMUNITY



daisyUI welcomes contributions from developers around the world




Sponsors and backers

JK



HD


SM
AK

HG




LH
B
TA
OA
SA
MZ
KP
j


AS

TE
JH

G
MM

B
M
MB
s
AA
M

CA
YH

JB
D




RS
SM




LI

A

BC
AP
v
A
Z

QT

CC

AM
I



G
Become a sponsor


TRY DAISYUI
ON YOUR FAVORITE FRAMEWORK




See all examples

Or play with daisyUI on: CodePen Tailwind Play


INSTALL DAISYUI

1. Install daisyUI as a Node package:

npm i -D daisyui@latest

pnpm add -D daisyui@latest

yarn add -D daisyui@latest

bun add -D daisyui@latest

2. Add daisyUI to tailwind.config.js:

module.exports = {
  plugins: [
    require('daisyui'),
  ],
}

import daisyui from "daisyui"
module.exports = {
  plugins: [
    daisyui,
  ],
}

Install guide

daisyUI

Free Component library
For utility first CSS frameworks

Contributing Changelog Roadmap License FAQ Affiliate Program New
pages How to install How to use components How to customize How to use themes
Color system Config Blog Resources Store
Available on Github OpenCollective NPM Unpkg CDN JSdeliver CDN
Try online Tailwind Play Codepen
related projects React daisyUI daisyUI Vue (WIP) Mary - Laravel components
daisyUI UnoCSS preset Theme Change

Created by

Pouya Saadeghi

Enter your email address
to get updates, news and discounts
Subscribe

Please upgrade your browser
daisyUI
4.5.0
 * Changelog
 * 
 * Version 3.x
 * Version 2.x
 * Version 1.x
 * 
 * Roadmap


 * Docs
    * Install
    * Use
    * Customize components
    * Config updated
    * Colors updated
    * Themes updated
    * Utilities new
    * Layout & Typography

 * Components
   
   
    * ACTIONS
      
      * Button updated
      * Dropdown updated
      * Modal
      * Swap
      * Theme Controller new
   
   
    * DATA DISPLAY
      
      * Accordion
      * Avatar
      * Badge
      * Card
      * Carousel
      * Chat bubble
      * Collapse
      * Countdown
      * Diff new
      * Kbd
      * Stat
      * Table
      * Timeline new
   
   
    * NAVIGATION
      
      * Breadcrumbs
      * Bottom navigation
      * Link
      * Menu
      * Navbar
      * Pagination
      * Steps
      * Tab updated
   
   
    * FEEDBACK
      
      * Alert
      * Loading
      * Progress
      * Radial progress
      * Skeleton new
      * Toast
      * Tooltip
   
   
    * DATA INPUT
      
      * Checkbox
      * File Input
      * Radio
      * Range
      * Rating
      * Select
      * Text input
      * Textarea
      * Toggle
   
   
    * LAYOUT
      
      * Artboard
      * Divider updated
      * Drawer
      * Footer
      * Hero
      * Indicator
      * Join (group items)
      * Mask
      * Stack
   
   
    * MOCKUP
      
      * Browser
      * Code
      * Phone
      * Window

 * Theme Generator
 * 
 * Store new
 * Blog
 * Resources
 * 
 * Playground
 * GitHub
 * Support daisyUI