daisyUI 3.0
๐ผ Features
- A plugin for Tailwind CSS
- Faster development
- Cleaner HTML
- Customizable and themeable
- Pure CSS. Works on all frameworks
๐ Install now!
npm i -D daisyui@latest
Then add daisyUI to your tailwind.config.js
:
module.exports = {
plugins: [require("daisyui")],
}
[ Read more โ ]
๐ Use
๐ 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] |
๐ List of components
show / hide
-
Actions
- Button
- Dropdown
- Modal
- Swap
-
Data display
- Alert
- Avatar
- Badge
- Banner
- Calendar
- Card
- Carousel
- Chat bubble
- Collapse
- Countdown
- Empty placeholder
- Kbd
- Loading
- Progress
- Radial progress
- Stat
- Table
- Tag
- Timeline
- Toast
- Tooltip
- Treeview
-
Data input
- Checkbox
- File input
- Text input
- Radio
- Range
- Rating
- Select
- Textarea
- Toggle
-
Layout
- Artboard
- Button group
- Divider
- Drawer
- Footer
- Join
- Hero
- Indicator
- Input group
- Mask
- Stack
-
Navigation
- Bottom Navigation
- Breadcrumbs
- Link
- Menu
- Navbar
- Pagination
- Steps
- Tab
-
Mockup
- Browser
- Code
- Phone
- Window
๐ฐ Featured on:
show / hide
- Blogs
- 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.
- Nuxtwind Daisy Nuxt 3 + Tailwind CSS + daisyUI Template and more pre-installed configurations like fonts, icons, animations, etc.