2020-12-14 07:31:46 +01:00
< div align = "center" >
2020-12-13 22:00:20 +01:00
2022-02-14 08:37:06 +01:00
[![][logo-url]][docs-url]
2020-12-08 01:30:04 +01:00
2022-04-15 11:40:33 +02:00
**The most popular, free and open-source Tailwind CSS component library**
2021-01-24 09:50:24 +01:00
2022-04-15 11:40:33 +02:00
[ [See all components ](https://daisyui.com/components/ ) ]
2022-02-14 08:37:06 +01:00
[![][tweet]][tweet-url]
2020-12-08 01:30:04 +01:00
2020-12-14 07:31:46 +01:00
< / div >
2020-12-13 22:00:20 +01:00
2022-02-14 08:37:06 +01:00
[![][banner-url]][docs-url]
2021-01-09 06:22:21 +01:00
2022-02-14 22:02:38 +01:00
# daisyUI 2.0
2021-01-10 04:33:33 +01:00
2022-02-14 08:37:06 +01:00
[![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]
[![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]
2020-12-26 03:56:35 +01:00
2022-04-15 11:40:33 +02:00
- [Official website → ](https://daisyui.com/ )
- [See all components → ](https://daisyui.com/components/ )
- [How to use → ](https://daisyui.com/docs/install/ )
2020-12-14 07:31:46 +01:00
2022-02-14 08:37:06 +01:00
## 🌼 Features
2022-04-15 11:40:33 +02:00
- A plugin for Tailwind CSS
- Faster development
- Cleaner HTML
- Customizable and themeable
- Pure CSS. Works on all frameworks
2020-12-26 03:56:35 +01:00
2022-02-14 08:37:06 +01:00
## 📀 Install now!
2020-12-14 07:31:46 +01:00
2021-01-24 09:50:24 +01:00
```bash
2021-08-04 21:32:32 +02:00
npm i daisyui
2020-12-14 07:31:46 +01:00
```
2022-04-17 09:40:22 +02:00
Then add daisyUI to your `tailwind.config.js` :
2022-02-14 08:37:06 +01:00
2020-12-14 09:36:21 +01:00
```js
2020-12-14 07:31:46 +01:00
module.exports = {
2022-02-14 08:37:06 +01:00
plugins: [require("daisyui")],
};
2020-12-14 07:31:46 +01:00
```
2020-12-18 04:03:04 +01:00
2022-04-17 09:40:22 +02:00
[ [Read more →][docs-url-install] ]
2020-12-14 07:31:46 +01:00
< details >
< summary >
Or use a CDN
< / summary >
2020-12-18 04:03:04 +01:00
2022-02-17 22:33:31 +01:00
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.
2021-01-13 15:36:26 +01:00
2021-05-13 05:58:17 +02:00
```html
2022-11-24 15:34:57 +01:00
< link href = "https://cdn.jsdelivr.net/npm/daisyui@2.42.1/dist/full.css" rel = "stylesheet" type = "text/css" / >
2022-02-17 22:33:31 +01:00
< script src = "https://cdn.tailwindcss.com" > < / script >
2021-05-13 05:58:17 +02:00
```
2020-12-18 04:03:04 +01:00
2020-12-14 07:31:46 +01:00
< / details >
2022-02-14 08:37:06 +01:00
## 🚀 Use
2022-04-17 09:40:22 +02:00
[[See all components → ](https://daisyui.com/components/ )]
2022-02-14 08:37:06 +01:00
2022-04-15 11:40:33 +02:00
## 📘 Documents + Examples
2021-01-10 06:18:57 +01:00
2022-04-15 11:40:33 +02:00
See the official site: [ [daisyui.com → ](https://daisyui.com/ )]
2021-01-10 06:18:57 +01:00
2020-12-14 07:31:46 +01:00
2022-04-30 10:13:00 +02:00
## 🤝 Support daisyUI
2022-02-14 08:37:06 +01:00
2022-04-30 10:13:00 +02:00
| | |
|---|---|
2022-09-02 15:03:32 +02:00
| **Premium Sponsors** < br /> Support this project by becoming a premium sponsor. < br /> [[Become a sponsor ](https://opencollective.com/daisyui )] | < a href = "https://opencollective.com/daisyui" target = "_blank" >< img src = "https://opencollective.com/daisyui/tiers/premium-sponsor.svg?button=false&width=500&avatarHeight=200" ></ a > |
2022-04-30 10:13:00 +02:00
| **Backers** < br /> Thank you to all our backers! < br /> [[Become a backer ](https://opencollective.com/daisyui )] | < a href = "https://opencollective.com/daisyui" target = "_blank" >< img src = "https://opencollective.com/daisyui/backers.svg?button=false&width=500&avatarHeight=46" ></ a > |
2022-09-21 11:19:12 +02:00
| **Contributors** < br /> This project exists thanks to all the people who contribute. < br /> [[Contribute ](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md )] | < a href = "https://github.com/saadeghi/daisyui/graphs/contributors" target = "_blank" >< img src = "https://contrib.rocks/image?repo=saadeghi/daisyui&columns=13" width = "500" ></ a > |
2020-12-14 07:31:46 +01:00
2022-04-30 10:13:00 +02:00
Tweet about daisyUI: [![][tweet]][tweet-url]
2021-08-19 21:20:47 +02:00
2022-04-15 20:57:18 +02:00
## 📁 List of components
2022-02-14 08:37:06 +01:00
2021-01-15 14:00:59 +01:00
< details >
< summary >
2021-08-19 21:20:47 +02:00
show / hide
2021-01-15 14:00:59 +01:00
< / summary >
2022-02-14 22:02:38 +01:00
- Actions
- [x] Button
- [x] Dropdown
- [x] Modal
- [x] Swap
- Data display
- [x] Alert
- [x] Avatar
- [x] Badge
- [ ] Banner
- [ ] Calendar
- [x] Card
- [x] Carousel
2022-11-24 09:34:25 +01:00
- [x] Chat bubble
2022-02-14 22:02:38 +01:00
- [x] Collapse
- [ ] Comment
- [x] Countdown
- [ ] Empty placeholder
- [x] Kbd
- [ ] Loading
- [x] Progress
- [x] Radial progress
- [x] Stat
- [x] Table
- [ ] Tag
- [ ] Timeline
2022-07-15 17:46:35 +02:00
- [x] Toast
2022-02-14 22:02:38 +01:00
- [x] Tooltip
- [ ] Treeview
- Data input
2021-01-15 14:00:59 +01:00
- [x] Checkbox
2022-02-14 22:02:38 +01:00
- [x] Text input
2021-01-15 14:00:59 +01:00
- [x] Radio
2022-02-14 22:02:38 +01:00
- [x] Range
2022-01-12 00:15:13 +01:00
- [x] Rating
2022-02-14 22:02:38 +01:00
- [x] Select
- [x] Textarea
2021-01-15 14:00:59 +01:00
- [x] Toggle
- [ ] Upload
2022-02-14 22:02:38 +01:00
- Layout
- [x] Artboard
- [x] Button group
- [x] Divider
- [x] Drawer
- [x] Footer
- [x] Hero
- [x] Indicator
- [x] Input group
- [x] Mask
- [x] Stack
- Navigation
2022-08-24 14:09:57 +02:00
- [x] Bottom Navigation
2022-02-14 22:02:38 +01:00
- [x] Breadcrumbs
- [x] Link
- [x] Menu
- [x] Navbar
- [x] Pagination
- [x] Steps
- [x] Tab
- Mockup
2021-01-15 14:00:59 +01:00
- [ ] Browser
- [x] Code
- [x] Phone
- [x] Window
2022-02-14 22:02:38 +01:00
2021-01-15 14:00:59 +01:00
< / details >
2022-02-14 08:37:06 +01:00
2022-04-15 11:40:33 +02:00
## 📰 Featured on:
2021-10-01 04:00:42 +02:00
< details >
< summary >
show / hide
< / summary >
2021-10-01 17:29:35 +02:00
- Blogs
- [Logrocket ](https://blog.logrocket.com/daisyui-tailwind-components-react-apps/ )
2021-10-20 01:45:01 +02:00
- [GraphCMS ](https://graphcms.com/blog/build-a-personal-timeline-with-graphcms-and-sveltekit )
2021-10-01 17:29:35 +02:00
- [wweb.dev ](https://wweb.dev/weekly/85/ )
- [flaming.codes ](https://flaming.codes/posts/boostrap-tailwind-alternative-with-daisy-ui )
2021-10-04 11:20:40 +02:00
- [rockyourcode ](https://www.rockyourcode.com/how-to-setup-react-typescript-with-snowpack-and-daisyui/ )
2021-10-01 17:29:35 +02:00
- [HackerNews ](https://news.ycombinator.com/item?id=28004515 )
- [Product Hunt ](https://www.producthunt.com/posts/daisyui )
- [Siecle Digital ](https://siecledigital.fr/2021/05/29/daisyui-plugin-gratuit-avec-composants-tailwind-css-a/ )
- [speckyboy ](https://speckyboy.com/weekly-news-for-designers-594/ )
- [dailydev ](https://app.daily.dev/posts/-4OPGw0te )
2021-11-24 23:14:45 +01:00
- [Future Tech Blog (Japanese) ](https://future-architect.github.io/articles/20211124a/ )
2022-03-14 21:17:08 +01:00
- [Adding Tailwind and Daisy UI to SvelteKit ](https://dev.to/brewhousedigital/adding-tailwind-and-daisy-ui-to-sveltekit-2hk5 )
2021-10-01 17:29:35 +02:00
- Youtube videos
2021-12-23 05:29:04 +01:00
- [Supabase & Sveltekit - Build Twitter in 75 minutes ](https://www.youtube.com/watch?v=mPQyckogDYc )
2021-10-01 17:29:35 +02:00
- [Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI ](https://www.youtube.com/watch?v=mEBPN_9jTAE )
2021-12-10 19:35:44 +01:00
- [Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI ](https://www.youtube.com/watch?v=Hpjq0D1vcpM )
2021-10-01 17:29:35 +02:00
- [SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes ](https://www.youtube.com/watch?v=zH2qG9YwN3s )
2021-12-10 19:35:44 +01:00
- [DaisyUI : Worth a try or skip on by? ](https://www.youtube.com/watch?v=hM9fENyAquM )
2021-10-01 17:29:35 +02:00
- [How to use daisyUI in SvelteKit? ](https://www.youtube.com/watch?v=haKnkk6ds20 )
- [DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian) ](https://www.youtube.com/watch?v=Wm2g6FWec34 )
2021-11-19 02:48:25 +01:00
- [Next.js - Tailwind - DeisyUI Setup ](https://www.youtube.com/watch?v=uXQgJbUj3PQ )
2022-01-25 13:26:17 +01:00
- [Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes! ](https://www.youtube.com/watch?v=5lF5PxBJoso )
2022-02-28 08:42:15 +01:00
- [Build a blog with Svelte ](https://www.youtube.com/watch?v=u9jtHBE6NL8 )
- [Building a product in less than 10 minutes: Laravel, InertiaJS, VueJS, TailwindCSS, DaisyUI ](https://www.youtube.com/watch?v=XR1rS-CCfx0 )
- [Infinite scrolling with MERN | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB ](https://www.youtube.com/watch?v=y7LYoRGRqRI )
- [How to install TailwindCSS v3 and DaisyUI to your React app ](https://www.youtube.com/watch?v=XBYvzPe7skc )
- [Laravel: DaisyUI Agiliza Tus Desarrollos Con TailwindCSS + Select2 Tailwind Style (Spanish) ](https://www.youtube.com/watch?v=28db3jojTgo )
2022-09-21 10:40:27 +02:00
- [Build a Responsive Landing Page using DaisyUI, ReactJS and Tailwind CSS ](https://www.youtube.com/watch?v=37gtpvy-k9U )
2021-10-20 01:45:01 +02:00
- Courses
2021-10-28 17:36:35 +02:00
- [Building with SvelteKit and GraphCMS ](https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms )
2021-10-20 01:45:01 +02:00
- [Svelte for Beginners by Mike Karan ](https://www.udemy.com/course/svelte-for-beginners/ )
2022-01-12 00:15:13 +01:00
- [React Front To Back 2022 by Brad Traversy ](https://www.udemy.com/course/react-front-to-back-2022/ )
- [Build Instagram profile page UI clone w/Next.js TailwindCSS ](https://www.udemy.com/course/build-instagram-profile-page-ui-clone-nextjs-tailwindcss/ )
- [Instagram UI Clone Login Page w/ NextJS & TailwindCSS ](https://www.udemy.com/course/instagram-ui-clone-login-page-w-nextjs-tailwindcss/ )
2022-01-12 13:00:10 +01:00
- [Build your Developer Portfolio and Blog from Scratch with Svelte and GraphCMS ](https://www.freecodecamp.org/news/build-your-developer-portfolio-from-scratch-with-sveltekit-and-graphcms/ )
2022-09-23 11:12:45 +02:00
- Starters
- [Vite-Boot ](https://github.com/kirklin/vite-boot ) Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + daisyUI Template.
2021-10-01 04:00:42 +02:00
< / details >
2020-12-14 07:31:46 +01:00
---
2022-02-14 08:37:06 +01:00
2020-12-14 08:37:03 +01:00
< div align = "center" >
2021-01-24 09:50:24 +01:00
༼ つ ◕_◕ ༽つ Please share
2020-12-14 08:37:03 +01:00
2022-02-14 08:37:06 +01:00
[![][tweet]][tweet-url]
2020-12-07 06:08:37 +01:00
2020-12-14 08:37:03 +01:00
< / div >
2021-05-30 04:26:52 +02:00
[install-size]: https://badgen.net/bundlephobia/minzip/daisyui?label=bundle%20size& color=green
2020-12-14 08:37:03 +01:00
[build]: https://badgen.net/github/checks/saadeghi/daisyui?label=build
2021-05-30 04:26:52 +02:00
[npm]: https://badgen.net/github/tag/saadeghi/daisyui?label=version& color=green
[dl]: https://badgen.net/npm/dt/daisyui?label=installs& icon=npm& color=green
[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?icon=github& color=green
[license]: https://badgen.net/github/license/saadeghi/daisyui?color=green
[stars]: https://badgen.net/github/stars/saadeghi/daisyui?color=green
2020-12-14 08:37:03 +01:00
[tweet]: https://img.shields.io/twitter/url?style=social& url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui
2020-12-18 04:33:40 +01:00
[install-size-url]: https://bundlephobia.com/result?p=daisyui
2020-12-14 08:37:03 +01:00
[license-url]: https://github.com/saadeghi/daisyui/blob/master/LICENSE
[npm-url]: https://www.npmjs.com/package/daisyui
2021-06-24 05:24:59 +02:00
[cdnjs-url]: https://cdnjs.com/libraries/daisyui
2020-12-14 08:37:03 +01:00
[gh-url]: https://github.com/saadeghi/daisyui
2021-10-01 03:06:58 +02:00
[tw-play-url]: https://daisyui.com/tailwindplay
2021-01-01 02:15:07 +01:00
[codepen-url]: https://codepen.io/saadeghi/pen/gOwWKvv
[unpkg-url]: https://unpkg.com/browse/daisyui/
[jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
2020-12-14 08:37:03 +01:00
[build-url]: https://github.com/saadeghi/daisyui/actions
2022-04-30 10:13:00 +02:00
[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
2022-11-23 23:54:12 +01:00
[number-of-components]: https://badgen.net/badge/total%20components/49/green
2021-05-13 02:24:56 +02:00
[docs-url-install]: https://daisyui.com/docs/install
2021-05-14 13:53:02 +02:00
[docs-url]: https://daisyui.com/
2021-05-23 22:59:24 +02:00
[logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
2021-05-14 13:12:04 +02:00
[banner-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/card-3.png