Package Exports
- daisyui
- daisyui/dist/base.js
- daisyui/dist/styled.js
- daisyui/dist/styled.rtl.js
- daisyui/dist/unstyled.js
- daisyui/dist/unstyled.rtl.js
- daisyui/dist/utilities
- daisyui/dist/utilities-styled.js
- daisyui/dist/utilities-unstyled.js
- daisyui/dist/utilities.js
- daisyui/src/colors/colorNames
- daisyui/src/colors/colorNames.js
- daisyui/src/colors/functions.js
- daisyui/src/colors/index.js
- daisyui/src/colors/themes
- daisyui/src/colors/themes.js
- daisyui/src/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (daisyui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
daisyUI 2.0
🌼 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.51.5/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
🚀 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
- Comment
- Countdown
- Empty placeholder
- Kbd
- Loading
- Progress
- Radial progress
- Stat
- Table
- Tag
- Timeline
- Toast
- Tooltip
- Treeview
Data input
- Checkbox
- Text input
- Radio
- Range
- Rating
- Select
- Textarea
- Toggle
- Upload
Layout
- Artboard
- Button group
- Divider
- Drawer
- Footer
- 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.