1 | <div align="center">
|
2 |
|
3 | [![][logo-url]][docs-url]
|
4 |
|
5 | **The most popular, free and open-source Tailwind CSS component library**
|
6 |
|
7 | [ [See all components](https://daisyui.com/components/) ]
|
8 |
|
9 | [![][tweet]][tweet-url]
|
10 |
|
11 | </div>
|
12 |
|
13 | [![][banner-url]][docs-url]
|
14 |
|
15 | # daisyUI 2.0
|
16 |
|
17 | [![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]
|
18 | [![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]
|
19 |
|
20 | - [Official website →](https://daisyui.com/)
|
21 | - [See all components →](https://daisyui.com/components/)
|
22 | - [How to use →](https://daisyui.com/docs/install/)
|
23 |
|
24 |
|
25 | ## 🌼 Features
|
26 |
|
27 | - A plugin for Tailwind CSS
|
28 | - Faster development
|
29 | - Cleaner HTML
|
30 | - Customizable and themeable
|
31 | - Pure CSS. Works on all frameworks
|
32 |
|
33 |
|
34 | ## 📀 Install now!
|
35 |
|
36 | ```bash
|
37 | npm i daisyui
|
38 | ```
|
39 |
|
40 | Then add daisyUI to your `tailwind.config.js`:
|
41 |
|
42 |
|
43 | ```js
|
44 | module.exports = {
|
45 | plugins: [require("daisyui")],
|
46 | };
|
47 | ```
|
48 |
|
49 | [ [Read more →][docs-url-install] ]
|
50 |
|
51 | <details>
|
52 | <summary>
|
53 | Or use a CDN
|
54 | </summary>
|
55 |
|
56 | 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.
|
57 |
|
58 | ```html
|
59 | <link href="https://cdn.jsdelivr.net/npm/daisyui@2.23.0/dist/full.css" rel="stylesheet" type="text/css" />
|
60 | <script src="https://cdn.tailwindcss.com"></script>
|
61 | ```
|
62 |
|
63 | </details>
|
64 |
|
65 |
|
66 | ## 🚀 Use
|
67 |
|
68 | [[See all components →](https://daisyui.com/components/)]
|
69 |
|
70 |
|
71 | ## 📘 Documents + Examples
|
72 |
|
73 | See the official site: [ [daisyui.com →](https://daisyui.com/)]
|
74 |
|
75 |
|
76 | ## 🤝 Support daisyUI
|
77 |
|
78 | | | |
|
79 | |---|---|
|
80 | | **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=92"></a> |
|
81 | | **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> |
|
82 | | **Contributors** <br /> This project exists thanks to all the people who contribute. <br /> [[Contribute](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md)] | |
|
83 |
|
84 | Tweet about daisyUI: [![][tweet]][tweet-url]
|
85 |
|
86 |
|
87 | ## 📁 List of components
|
88 |
|
89 | <details>
|
90 | <summary>
|
91 | show / hide
|
92 | </summary>
|
93 |
|
94 | - Actions
|
95 | - [x] Button
|
96 | - [x] Dropdown
|
97 | - [x] Modal
|
98 | - [x] Swap
|
99 |
|
100 | - Data display
|
101 | - [x] Alert
|
102 | - [x] Avatar
|
103 | - [x] Badge
|
104 | - [ ] Banner
|
105 | - [ ] Calendar
|
106 | - [x] Card
|
107 | - [x] Carousel
|
108 | - [ ] Chat bubble
|
109 | - [x] Collapse
|
110 | - [ ] Comment
|
111 | - [x] Countdown
|
112 | - [ ] Empty placeholder
|
113 | - [x] Kbd
|
114 | - [ ] Loading
|
115 | - [x] Progress
|
116 | - [x] Radial progress
|
117 | - [x] Stat
|
118 | - [x] Table
|
119 | - [ ] Tag
|
120 | - [ ] Timeline
|
121 | - [x] Toast
|
122 | - [x] Tooltip
|
123 | - [ ] Treeview
|
124 |
|
125 | - Data input
|
126 | - [x] Checkbox
|
127 | - [x] Text input
|
128 | - [x] Radio
|
129 | - [x] Range
|
130 | - [x] Rating
|
131 | - [x] Select
|
132 | - [x] Textarea
|
133 | - [x] Toggle
|
134 | - [ ] Upload
|
135 |
|
136 | - Layout
|
137 | - [x] Artboard
|
138 | - [x] Button group
|
139 | - [x] Divider
|
140 | - [x] Drawer
|
141 | - [x] Footer
|
142 | - [x] Hero
|
143 | - [x] Indicator
|
144 | - [x] Input group
|
145 | - [x] Mask
|
146 | - [x] Stack
|
147 |
|
148 | - Navigation
|
149 | - [ ] App bar
|
150 | - [x] Breadcrumbs
|
151 | - [x] Link
|
152 | - [x] Menu
|
153 | - [x] Navbar
|
154 | - [x] Pagination
|
155 | - [x] Steps
|
156 | - [x] Tab
|
157 |
|
158 | - Mockup
|
159 | - [ ] Browser
|
160 | - [x] Code
|
161 | - [x] Phone
|
162 | - [x] Window
|
163 |
|
164 |
|
165 | </details>
|
166 |
|
167 |
|
168 | ## 📰 Featured on:
|
169 |
|
170 | <details>
|
171 | <summary>
|
172 | show / hide
|
173 | </summary>
|
174 |
|
175 | - Blogs
|
176 | - [Logrocket](https://blog.logrocket.com/daisyui-tailwind-components-react-apps/)
|
177 | - [GraphCMS](https://graphcms.com/blog/build-a-personal-timeline-with-graphcms-and-sveltekit)
|
178 | - [wweb.dev](https://wweb.dev/weekly/85/)
|
179 | - [flaming.codes](https://flaming.codes/posts/boostrap-tailwind-alternative-with-daisy-ui)
|
180 | - [rockyourcode](https://www.rockyourcode.com/how-to-setup-react-typescript-with-snowpack-and-daisyui/)
|
181 | - [HackerNews](https://news.ycombinator.com/item?id=28004515)
|
182 | - [Product Hunt](https://www.producthunt.com/posts/daisyui)
|
183 | - [Siecle Digital](https://siecledigital.fr/2021/05/29/daisyui-plugin-gratuit-avec-composants-tailwind-css-a/)
|
184 | - [speckyboy](https://speckyboy.com/weekly-news-for-designers-594/)
|
185 | - [dailydev](https://app.daily.dev/posts/-4OPGw0te)
|
186 | - [Future Tech Blog (Japanese)](https://future-architect.github.io/articles/20211124a/)
|
187 | - [Adding Tailwind and Daisy UI to SvelteKit](https://dev.to/brewhousedigital/adding-tailwind-and-daisy-ui-to-sveltekit-2hk5)
|
188 | - Youtube videos
|
189 | - [Supabase & Sveltekit - Build Twitter in 75 minutes](https://www.youtube.com/watch?v=mPQyckogDYc)
|
190 | - [Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI](https://www.youtube.com/watch?v=mEBPN_9jTAE)
|
191 | - [Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI](https://www.youtube.com/watch?v=Hpjq0D1vcpM)
|
192 | - [SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes](https://www.youtube.com/watch?v=zH2qG9YwN3s)
|
193 | - [DaisyUI : Worth a try or skip on by?](https://www.youtube.com/watch?v=hM9fENyAquM)
|
194 | - [How to use daisyUI in SvelteKit?](https://www.youtube.com/watch?v=haKnkk6ds20)
|
195 | - [DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)](https://www.youtube.com/watch?v=Wm2g6FWec34)
|
196 | - [Next.js - Tailwind - DeisyUI Setup](https://www.youtube.com/watch?v=uXQgJbUj3PQ)
|
197 | - [Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes!](https://www.youtube.com/watch?v=5lF5PxBJoso)
|
198 | - [Build a blog with Svelte](https://www.youtube.com/watch?v=u9jtHBE6NL8)
|
199 | - [Building a product in less than 10 minutes: Laravel, InertiaJS, VueJS, TailwindCSS, DaisyUI](https://www.youtube.com/watch?v=XR1rS-CCfx0)
|
200 | - [Infinite scrolling with MERN | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB](https://www.youtube.com/watch?v=y7LYoRGRqRI)
|
201 | - [How to install TailwindCSS v3 and DaisyUI to your React app](https://www.youtube.com/watch?v=XBYvzPe7skc)
|
202 | - [Laravel: DaisyUI Agiliza Tus Desarrollos Con TailwindCSS + Select2 Tailwind Style (Spanish)](https://www.youtube.com/watch?v=28db3jojTgo)
|
203 | - Courses
|
204 | - [Building with SvelteKit and GraphCMS](https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms)
|
205 | - [Svelte for Beginners by Mike Karan](https://www.udemy.com/course/svelte-for-beginners/)
|
206 | - [React Front To Back 2022 by Brad Traversy](https://www.udemy.com/course/react-front-to-back-2022/)
|
207 | - [Build Instagram profile page UI clone w/Next.js TailwindCSS](https://www.udemy.com/course/build-instagram-profile-page-ui-clone-nextjs-tailwindcss/)
|
208 | - [Instagram UI Clone Login Page w/ NextJS & TailwindCSS](https://www.udemy.com/course/instagram-ui-clone-login-page-w-nextjs-tailwindcss/)
|
209 | - [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/)
|
210 |
|
211 | </details>
|
212 |
|
213 | ---
|
214 |
|
215 | <div align="center">
|
216 |
|
217 |
|
218 | ༼ つ ◕_◕ ༽つ Please share
|
219 |
|
220 | [![][tweet]][tweet-url]
|
221 |
|
222 | </div>
|
223 |
|
224 | [install-size]: https://badgen.net/bundlephobia/minzip/daisyui?label=bundle%20size&color=green
|
225 | [build]: https://badgen.net/github/checks/saadeghi/daisyui?label=build
|
226 | [npm]: https://badgen.net/github/tag/saadeghi/daisyui?label=version&color=green
|
227 | [dl]: https://badgen.net/npm/dt/daisyui?label=installs&icon=npm&color=green
|
228 | [commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?icon=github&color=green
|
229 | [license]: https://badgen.net/github/license/saadeghi/daisyui?color=green
|
230 | [stars]: https://badgen.net/github/stars/saadeghi/daisyui?color=green
|
231 | [tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui
|
232 | [install-size-url]: https://bundlephobia.com/result?p=daisyui
|
233 | [license-url]: https://github.com/saadeghi/daisyui/blob/master/LICENSE
|
234 | [npm-url]: https://www.npmjs.com/package/daisyui
|
235 | [cdnjs-url]: https://cdnjs.com/libraries/daisyui
|
236 | [gh-url]: https://github.com/saadeghi/daisyui
|
237 | [tw-play-url]: https://daisyui.com/tailwindplay
|
238 | [codepen-url]: https://codepen.io/saadeghi/pen/gOwWKvv
|
239 | [unpkg-url]: https://unpkg.com/browse/daisyui/
|
240 | [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
|
241 | [build-url]: https://github.com/saadeghi/daisyui/actions
|
242 | [tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
|
243 | [number-of-components]: https://badgen.net/badge/total%20components/47/green
|
244 | [docs-url-install]: https://daisyui.com/docs/install
|
245 | [docs-url]: https://daisyui.com/
|
246 | [logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
|
247 | [banner-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/card-3.png
|