https://daisyui.com/ [ ] 5.0.46 * daisyUI 5 * * Changelog * * Version 4.x * Version 3.x * Version 2.x * Version 1.x * * Roadmap Search [ ] Components Template Store * 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 * caramellatte * abyss * silk * * Make your theme! * EN English * AR l`rby@ * BN baaNlaa * CA Catala * CS Cestina * DE Deutsch * ES Espanol * FA frsy * FR Francais * HU Magyar * ID Bahasa Indonesia * IT Italiano * JA Ri Ben Yu * KO hangugeo * MS Bahasa Melayu * PL Polski * PT Portugues * RO Romana * RU Russkii * UK Ukrayins'ka * VI Tieng Viet * ZH Jian Ti Zhong Wen * ZH Fan Ti Zhong Wen npm i -D daisyui@latest daisyUI 5 Watch daisyUI 5.0 intro Faster, cleaner, easier Tailwind CSS development daisyUI is the Tailwind CSS plugin you will love! It provides useful component class names to help you write less code and build faster. How to use? don't re-invent the wheel every time yawing face emoji 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 sunglasses emoji 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 [*] xs [*] sm [*] md [*] lg [*] xl ( ) xs ( ) sm ( ) md ( ) lg ( ) xl Semantic colors primary secondary accent neutral info success warning error // Styling a simple button // Result: Tailwind Button Used by engineers at Meta Research Alibaba Amazon Adobe Google Cloud 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
= [ ] [ ] Submit to newsletter [ ] Accept terms of use Save Fewer class names Faster development Smaller file size With daisyUI, you write 88% fewer class names And your HTML size will be about 79% smaller. Get started CSS Class names Tailwind only 114 Tailwind + daisyUI 14 88% fewer class names HTML size Tailwind only 2110 byte Tailwind + daisyUI 427 byte 79% 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 Button | Button 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? daisyUI vuedaisyUI reactdaisyUI sveltedaisyUI qwikdaisyUI laravel daisyUI nextjsdaisyUI solidjsdaisyUI preactdaisyUI phoenixdaisyUI nuxtjsdaisyUI astrodaisyUI angulardaisyUI vitedaisyUI rails * * * * * * * Admin panel * Dashboard * Notifications * Messages * People * Products 50 Neutral Primary Secondary Accent Info Success Warning Error Tailwind button * 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 Tailwind button * 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 Tailwind button * 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 Tailwind button * 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 Tailwind button * 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 Tailwind button * 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 Tailwind button * 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 Tailwind button * 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 61 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 GitHub Stars open-source projects using daisyUI NPM Installs Featured in Fireship.io Syntax Podcast FreeCodeCamp Thinking Elixir Podcast Coding Cat Podcast I use daisyUI for every site now! TikitaTech Indie hacker I used daisyUI theme generator's Halloween theme and tweaked it to what I want and now, I'm so proud of what I've got! Ade Software Engineer daisyUI has been my "go-to" for side projects and vibe coding for this past year Joro Yordanov Designer daisyUI is *so usefull*. My clients love the look, it is so easy Bailey Burnsed Full Stack Dev I've been *enjoying daisyui* since I discovered it very recently, great job! Vincent Bergeron Software Developer Found the power of tailwindcss and daisyUI these last few days. These makes front-end development so much *faster and enjoyable*. Lourenco Matalonga Developer, Indie Hacker Can't state how much I love daisyUI [?] rootkid Software Developer The new daisyUI 5.0 is awesome! The UI components are smooth and has a lot of new goodies. Ovi Stoica Software Developer daisyUI is the missing part from Tailwind CSS which is the perfect choice for devs who need easy UI design Mahdi M Software developer daisyUI is probably the *best Tailwind Plugin I've ever used*, I've been using it since 2023 Shaun Furtado JS dev I'm glad I found daisyUI. daisyUI is built with Tailwind CSS which makes it perfect fit for me. Rem Kim Founder of resolveai.co daisyUI is *the goat* Dorian Develops Self-Taught Programmer DaisyUI just looks amazing. Kelvin Htat Solo founder DaisyUI is pretty amazing Shawn Developer Just revamped my personal website using daisyUI and I'm thrilled with the *simplicity and cleanliness* it brings! Christian Ruby on Rails Developer It's great! Been using it in all my projects! Sara Vieira Developer at axo.dev daisyUI is a great project! Grabbed the file tree component, it works great and *doesn't even use JS* - it's just using summary and details elements, very neat! Lachlan Miller Vue.js team Rails 8 + daisyUI = MVP Magic Kaleb Lape Rails developer I was already a fan of daisyUI because of their *incredible components and theme system* But did you know they also have entire templates Erwin Founder of Tailscan daisyUI is such a *time saver* Ollie The Dev Amplify UI, texttodesign.ai *daisyUI is underrated.* The best mix of Bootstrap (semantic) + Tailwind (utility). Just pick your colors and go. Supports most common components. Now with Tailwind v4. Theme builder. Quick adjustment with Tailwind. *CSS only and no JS. Zero dependencies.* DHH's "No build" friendly. Kenn Ejima Co-Founder & CTO 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... Marc Lou Solopreneur daisyUI is a *joy to use* Oli Nelson Indie Software Dev DaisyUI is really goated! I am a happy user for the past 5 years. Nithur Developer Using daisyUI feels like using the old Bootstrap but with the additional power of Tailwind's customization. Mazipan Software developer How much winning can one component library take?!? htmx.org high power tools for HTML If you're a fan of Tailwind but hate writing 20+ class names to style a simple button or card, try daisyUI, it's really cool! AbdulAzeez Software Developer If you try daisyUI, there is no turning back... Marc Lou Solopreneur daisyUI is amazing and *I use it for all my projects* Cyris Software Engineer I used daisyUI this week with Remix and am delighted by it so far. Matt Ferrante Developer Why did it take me so long to pair Tailwind with daisyUI... *Now I feel like a 10X developer*. Joel Pickin Software developer I love daisyUI, It's by far *my favorite CSS tool* and what finally got me into Tailwind. I'm shipping great looking UIs thanks to daisyUI. Alejandro Barrera Aponte Using a component library such as *daisyUI is such a productivity hack*. No going back from that. Josef Buttgen Developer *daisyUI saved me months of component design*. Erick Rodriguez Software Engineer daisyUI is awesome! Daniel Kelly Teacher/Content Creator at vueschool.io If you want to create a quick MVP for your next project, I recommend daisyUI. It offers a simple and elegant design. Jairon Landa Software developer I would have never touched Tailwind CSS if it wasn't for daisyUI lang Software developer I'm a big fan of daisyUI Dan Schoonmaker Software engineer If you use Tailwind and want prepackaged components then I wholeheartedly recommend daisyUI! An awesome set of defaults that's super configurable Scott Spence SvelteSociety London events organiser I Love daisyUI Guillaume Meyer Entrepreneur daisyUI is the only way to use tailwind Suspect Dev Adding daisyUI to the front and adding new features to the products really affect all of our metrics. Manuel Gracia Developer I like to use Tailwind+daisyUI to have a Bootstrap like experience. Tiago Bastos Software developer With daisyUI I haven't written a single line of css, yet my div classes are pretty clean Bogdan Chayka Founder 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 Jiri Kratochvil vuejs.berlin co-organizer daisyUI is good, *makes code much cleaner* for often used sets of classes without massive amount's of extra css bloat. Aaron Moy Founder I think daisyUI is very cool, it's *easy to use* and you can build a clean UI with it. Nihad Frontend Software Engineer *Love daisyUI*, excited to use it again on my next job Steve Williams Applications developer We are using Go for the backend, daisyUI + Tailwind for styling, and HTMX for interactivity. Jack Spirou Founder daisyUI really makes it super easy to get a clean looking MVP up and out the door. Josh Cirre Entrepreneur I found daisyUI to be an amazing pair with htmx Ryan Dsouza DevOps enthusiast I recommend you to use daisyUI on top of Tailwind they work together and gives more possibilities and ease. Christophe Anfry Ex Google Workspace technical support daisyUI is awesome! borislav grigorov Indiehacker I love daisyUI and we used it for a hackathon project last week Loftwah DevOps Engineer I found Tailwind CSS complicated, but daisyUI looks like something I can give a try. Bonnie Technical Writer 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. Chris Tankersley PHP Developer, Writer, Speaker, and Teacher We use daisyUI + Tailwind with our projects. It has been *extremely helpful* building websites fast and give us a red design line through several different projects. TiiaAurora Tech journalist daisyUI is what I use for everything now. Pramod Software developer I cannot thank you enough for daisyUI. It has completely taken over my UIs. It is a breeze to get consistent, great looking user interfaces and quickly! jogi Developer Damn, daisyUI is NICE! Dorian Develops Indie hacker 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. Jagdish kashyap Software developer *I'm enjoying daisyUI* Alexander Thomsen Founder of moonbit.ai daisyUI v5 is a *game changer*... It's never been this easy to customize components and theme in typical server rendered projects. iam_bpn Developer I *absolutely love daisyUI* and use it in all my projects. Cam Pak Developer I used daisyUI, *super happy with it!* Nick S. SaaS builder Writing technical blog posts and I just use daisyUI for styling and then I have a ton of free time Lac Tran An Software craftman daisyUI makes working with UI components *so easy* Jason Indie Game Dev Been a big fan on daisyUI for 2 years, kudos to your great work! Kenn Ejima Co-Founder & CTO Been using daisyUI for a while and I must say...such a fun addon for Tailwind CSS, well done Dev Ed Content Creator daisyUI 5 + Tailwind CSS 4 is just an amazing combo for fast and high-end results Nacho Herrera Developer daisyUI logo Free and open-source Built by the community daisyUI welcomes contributions from developers around the world Sponsors and backers Become a sponsor Try daisyUI on your favorite framework daisyUI sveltedaisyUI vuedaisyUI reactdaisyUI solidjsdaisyUI rails daisyUI preactdaisyUI angulardaisyUI astrodaisyUI qwikdaisyUI nextjs daisyUI nuxtjsdaisyUI laraveldaisyUI phoenixdaisyUI vite See all examples Or play with daisyUI on: CodePen Tailwind Play Install daisyUI 1. Install daisyUI as a Node package: (*) NPM npm i -D daisyui@latest ( ) PNPM pnpm add -D daisyui@latest ( ) Yarn yarn add -D daisyui@latest ( ) Bun bun add -D daisyui@latest ( ) Deno deno i -D npm:daisyui@latest 2. Add daisyUI to app.css: (*) @import "tailwindcss"; @plugin "daisyui"; Install guide Free Component library For utility first CSS frameworks daisyUI Logo and brand License FAQ Roadmap Changelog Contributing llms.txt pages How to install How to use components How to customize How to use themes Color system Config Resources Blog Store daisyUI Figma Library Frameworks Angular Astro Django Laravel Nextjs Nuxt Rails React Svelte Vue Compare libraries MUI vs daisyUI shadcn/ui vs daisyUI Bootstrap vs daisyUI Flowbite vs daisyUI Radix vs daisyUI Bulma vs daisyUI NuxtUI vs daisyUI HeroUI vs daisyUI Preline UI vs daisyUI Chakra UI vs daisyUI related projects Theme Change MaryUI (Laravel) Feliz.DaisyUI (F#) Phcurado (Phoenix) Laravel Starter Kit with daisyUI Tailscan extension Pouya Saadeghi Created by Pouya Saadeghi Get the daisyUI updates and news [ ] Subscribe We don't share your email address with anyone Please upgrade your browser 5.0.46 * daisyUI 5 * * Changelog * * Version 4.x * Version 3.x * Version 2.x * Version 1.x * * Roadmap * Docs + Introduction + Install + CDN + + Use + Upgrade guide + V5 release notes + Code editor & LLM setup new + + Customize + Config + Colors + Themes + Base style + Utilities & variables + Layout & Typography * Components + Actions o Button o Dropdown o Modal o Swap o Theme Controller + Data display o Accordion o Avatar o Badge o Card o Carousel o Chat bubble o Collapse o Countdown o Diff o Kbd o List new o Stat o Status new o Table o Timeline + Navigation o Breadcrumbs o Dock o Link o Menu o Navbar o Pagination o Steps o Tab + Feedback o Alert o Loading o Progress o Radial progress o Skeleton o Toast o Tooltip + Data input o Calendar new o Checkbox o Fieldset new o File Input o Filter new o Label new o Radio o Range o Rating o Select o Input field o Textarea o Toggle o Validator new + Layout o Divider o Drawer o Footer o Hero o Indicator o Join (group items) o Mask o Stack + Mockup o Browser o Code o Phone o Window * Theme Generator new * * Store updated * Blog * Resources * * Playground * GitHub * Discord * Support daisyUI * T-shirts new * llms.txt new