@ballerine/daisyui

The most popular, free and open-source Tailwind CSS component library

[ See all components ]

daisyUI 2.0

• Official website →
• See all components →
• How to use →

🌼 Features

• A plugin for Tailwind CSS
• Faster development
• Cleaner HTML
• Customizable and themeable
• Pure CSS. Works on all frameworks

📀 Install now!

npm i daisyui

Then add daisyUI to your tailwind.config.js:

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

[ Read more → ]

Or use a CDN

Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.48.0/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

🚀 Use

[See all components →]

📘 Documents + Examples

See the official site: [ daisyui.com →]

🤝 Support daisyUI

Premium Sponsors Support this project by becoming a premium sponsor. [Become a sponsor]
Backers Thank you to all our backers! [Become a backer]
Contributors This project exists thanks to all the people who contribute. [Contribute]

Tweet about daisyUI:

📁 List of components

show / hide

• Actions

  • [x] Button
  • [x] Dropdown
  • [x] Modal
  • [x] Swap

• Data display

  • [x] Alert
  • [x] Avatar
  • [x] Badge
  • [ ] Banner
  • [ ] Calendar
  • [x] Card
  • [x] Carousel
  • [x] Chat bubble
  • [x] Collapse
  • [ ] Comment
  • [x] Countdown
  • [ ] Empty placeholder
  • [x] Kbd
  • [ ] Loading
  • [x] Progress
  • [x] Radial progress
  • [x] Stat
  • [x] Table
  • [ ] Tag
  • [ ] Timeline
  • [x] Toast
  • [x] Tooltip
  • [ ] Treeview

• Data input

  • [x] Checkbox
  • [x] Text input
  • [x] Radio
  • [x] Range
  • [x] Rating
  • [x] Select
  • [x] Textarea
  • [x] Toggle
  • [ ] Upload

• Layout

  • [x] Artboard
  • [x] Button group
  • [x] Divider
  • [x] Drawer
  • [x] Footer
  • [x] Hero
  • [x] Indicator
  • [x] Input group
  • [x] Mask
  • [x] Stack

• Navigation

  • [x] Bottom Navigation
  • [x] Breadcrumbs
  • [x] Link
  • [x] Menu
  • [x] Navbar
  • [x] Pagination
  • [x] Steps
  • [x] Tab

• Mockup

  • [ ] Browser
  • [x] Code
  • [x] Phone
  • [x] Window

📰 Featured on:

show / hide

• Blogs
  • Logrocket
  • GraphCMS
  • wweb.dev
  • flaming.codes
  • rockyourcode
  • HackerNews
  • Product Hunt
  • Siecle Digital
  • speckyboy
  • dailydev
  • Future Tech Blog (Japanese)
  • Adding Tailwind and Daisy UI to SvelteKit
• Youtube videos
  • Supabase & Sveltekit - Build Twitter in 75 minutes
  • Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI
  • Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI
  • SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes
  • DaisyUI : Worth a try or skip on by?
  • How to use daisyUI in SvelteKit?
  • DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)
  • Next.js - Tailwind - DeisyUI Setup
  • Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes!
  • Build a blog with Svelte
  • Building a product in less than 10 minutes: Laravel, InertiaJS, VueJS, TailwindCSS, DaisyUI
  • Infinite scrolling with MERN | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB
  • How to install TailwindCSS v3 and DaisyUI to your React app
  • Laravel: DaisyUI Agiliza Tus Desarrollos Con TailwindCSS + Select2 Tailwind Style (Spanish)
  • Build a Responsive Landing Page using DaisyUI, ReactJS and Tailwind CSS
• Courses
  • Building with SvelteKit and GraphCMS
  • Svelte for Beginners by Mike Karan
  • React Front To Back 2022 by Brad Traversy
  • Build Instagram profile page UI clone w/Next.js TailwindCSS
  • Instagram UI Clone Login Page w/ NextJS & TailwindCSS
  • Build your Developer Portfolio and Blog from Scratch with Svelte and GraphCMS
• Starters
  • Vite-Boot Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + daisyUI Template.

---

༼ つ ◕_◕ ༽つ Please share