daisyUI
Tailwind CSS Components
npm i daisyui
Clean HTML with component classes
Customizable and themeable
Pure CSS, No dependencies
Betsy Braddock
Strategic Art Manager
Global Illustration Observer
Business Alignment Developer
Global Illustration Observer
Business Alignment Developer
Design
Art
Illustration
Superpower settings
Enable your favorite superpowers. Terms and conditions apply
Card Component
May 14th
Use card component to easily show blog posts, products, features, items and more.
Beatrice Thurman
220 Followers
Reports
Audience Report
Search Engines
Direct
Social Media
Emails
Ad campaigns
progress component
Show progressbar, loadings or simple bar charts using progress component
4,600
Page views
Downloading...
progress component
Show progressbar, loadings or simple bar charts using progress component
Clean HTML
with component classes
Your HTML doesn't need to be messy. daisyUI adds component classes to Tailwind CSS. Classes like btn, card, etc... No need to deal with hundreds of utility classes.
Creating a button
using only utility classes vs using daisyUI component classes
<a class="inline-block px-4 py-3
text-sm font-semibold text-center
text-white uppercase transition
duration-200 ease-in-out
bg-indigo-500 rounded-md
cursor-pointer
hover:bg-indigo-600">Button</a>
VS
VS
<a class="btn btn-primary">Button</a>Creating a toggle
using only utility classes vs using daisyUI component classes
<div class="relative">
<input type="checkbox" class="peer
appearance-none cursor-pointer
border border-gray-300 rounded-full
checked:border-gray-900 w-12 h-7"/>
<span class="peer-checked:left-6
peer-checked:bg-gray-900
transition-all duration-500
pointer-events-none w-5 h-5
block absolute top-1 left-1
rounded-full bg-gray-300"></span>
</div>
VS
VS
<input type="checkbox" class="toggle"/>Creating a menu component
using only utility classes vs using daisyUI component classes
<