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
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-form — POST 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&id=9fd7333f07&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