1 | <div align="center">
|
2 |
|
3 | [![][logo-url]][docs-url]
|
4 |
|
5 | **Tailwind CSS Components**
|
6 | Adds component classes like `btn`, `card` and more to Tailwind CSS
|
7 |
|
8 | [ [See all components][docs-url] ]
|
9 |
|
10 | [![][tweet]][tweet-url]
|
11 |
|
12 | </div>
|
13 |
|
14 | [![][banner-url]][docs-url]
|
15 |
|
16 | # DaisyUI
|
17 | [![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][install-size]][install-size-url]
|
18 | [![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url] [![][license]][license-url]
|
19 |
|
20 |
|
21 | - 👉 [ [See all components][docs-url] ]
|
22 | - 📘 Documents: [daisyui.com][docs-url]
|
23 | - 🎲 Try it online: [Tailwind Play][tw-play-url] | [Codepen][codepen-url]
|
24 | - 📦 Source: [GitHub][gh-url] | [NPM][npm-url] | [Unpkg][unpkg-url] | [JSdeliver][jsdeliver-url]
|
25 |
|
26 | ---
|
27 |
|
28 | ## 🌼 Features
|
29 | - **Tailwind CSS plugin**
|
30 | DaisyUI is a Tailwind CSS plugin. Install it, add it to your `tailwind.config.js` file.
|
31 | - **Component classes**
|
32 | Adds component classes to Tailwind. Classes like `btn`, `card`,… So you will end up with a cleaner HTML.
|
33 | - **Semantic color names**
|
34 | Adds color names like `primary`, `secondary`, `accent`,….
|
35 | - **Customizable**
|
36 | You can customize the design of components with Tailwind utility classes and CSS variables.
|
37 | - **Themeable**
|
38 | Add multiple themes and customize colors. You can even set a theme for a specific section of your page.
|
39 | - **RTL supported**
|
40 | Enable `rtl` config for right to left layouts.
|
41 | - **Pure CSS**
|
42 | No script file, no dependencies. 2KB gzip!
|
43 |
|
44 | ---
|
45 |
|
46 | ## 📀 Install now!
|
47 |
|
48 | ```bash
|
49 | npm i daisyui --save
|
50 | ```
|
51 |
|
52 | Then add DaisyUI to your `tailwind.config.js`
|
53 | [ [Read more][docs-url-install] ]
|
54 | ```js
|
55 | module.exports = {
|
56 |
|
57 | plugins: [
|
58 | require('daisyui'),
|
59 | ],
|
60 |
|
61 | }
|
62 | ```
|
63 |
|
64 |
|
65 | <details>
|
66 | <summary>
|
67 | Or use a CDN
|
68 | </summary>
|
69 |
|
70 |
|
71 | 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.*
|
72 |
|
73 |
|
74 | ```html
|
75 | <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
|
76 | <link href="https://cdn.jsdelivr.net/npm/daisyui@1.3.11/dist/full.css" rel="stylesheet" type="text/css" />
|
77 | ```
|
78 |
|
79 | </details>
|
80 |
|
81 | ---
|
82 | ## 🚀 Use
|
83 | Use component classes like `btn`, `card`, etc… to build your UI.
|
84 | ```html
|
85 | <a class="btn">Hello!</a>
|
86 | ```
|
87 | ```html
|
88 | <div class="shadow card">
|
89 | <div class="card-body">
|
90 | <h2 class="card-title">Card Title</h2>
|
91 | <p>Card text</p>
|
92 | </div>
|
93 | </div>
|
94 | ```
|
95 |
|
96 | 👉 [See all components][docs-url]
|
97 | 🎲 [Try it online][tw-play-url]
|
98 |
|
99 | ---
|
100 |
|
101 | ## 📘 Documents + Examples
|
102 | Read the documents for more info
|
103 | [ [daisyui.com][docs-url] ↗︎ ]
|
104 |
|
105 | <details>
|
106 | <summary>
|
107 | List of components
|
108 | </summary>
|
109 |
|
110 | - [x] Alert
|
111 | - [x] Artboard
|
112 | - [ ] App bar
|
113 | - [x] Avatar
|
114 | - [x] Avatar group
|
115 | - [x] Badge
|
116 | - [ ] Banner
|
117 | - [x] Breadcrumb
|
118 | - [x] Button
|
119 | - [x] Button group
|
120 | - [ ] Calendar
|
121 | - [x] Carousel
|
122 | - [x] Card
|
123 | - [ ] Chat bubble
|
124 | - [x] Collapse (Accordion)
|
125 | - [ ] Comment
|
126 | - [x] Countdown
|
127 | - [ ] Cover
|
128 | - [x] Divider
|
129 | - [x] Drawer
|
130 | - [ ] Empty placeholder
|
131 | - [ ] Footer
|
132 | - [ ] Form
|
133 | - [x] Select
|
134 | - [x] Text input
|
135 | - [x] Text area
|
136 | - [x] Checkbox
|
137 | - [x] Radio
|
138 | - [ ] Range slider
|
139 | - [ ] Rating
|
140 | - [x] Toggle
|
141 | - [ ] Upload
|
142 | - [x] Hero
|
143 | - [x] Link
|
144 | - [ ] Loading
|
145 | - [x] Menu
|
146 | - [ ] Mockup
|
147 | - [ ] Browser
|
148 | - [x] Code
|
149 | - [x] Phone
|
150 | - [x] Window
|
151 | - [x] Navbar
|
152 | - [x] Mask
|
153 | - [x] Modal
|
154 | - [x] Pagination
|
155 | - [x] Progress
|
156 | - [x] Stat
|
157 | - [x] Steps
|
158 | - [ ] Tag
|
159 | - [x] Table
|
160 | - [x] Tabs
|
161 | - [ ] Timeline
|
162 | - [ ] Toast
|
163 | - [x] Tooltip
|
164 | - [ ] Treeview
|
165 |
|
166 | </details>
|
167 |
|
168 | ---
|
169 |
|
170 | <div align="center">
|
171 |
|
172 |
|
173 | ༼ つ ◕_◕ ༽つ Please share
|
174 |
|
175 | [![][tweet]][tweet-url]
|
176 |
|
177 | </div>
|
178 |
|
179 |
|
180 |
|
181 | [install-size]: https://badgen.net/bundlephobia/minzip/daisyui?label=bundle%20size&color=green
|
182 | [build]: https://badgen.net/github/checks/saadeghi/daisyui?label=build
|
183 | [npm]: https://badgen.net/github/tag/saadeghi/daisyui?label=version&color=green
|
184 | [dl]: https://badgen.net/npm/dt/daisyui?label=installs&icon=npm&color=green
|
185 | [commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?icon=github&color=green
|
186 | [license]: https://badgen.net/github/license/saadeghi/daisyui?color=green
|
187 | [stars]: https://badgen.net/github/stars/saadeghi/daisyui?color=green
|
188 | [tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui
|
189 |
|
190 | [install-size-url]: https://bundlephobia.com/result?p=daisyui
|
191 | [license-url]: https://github.com/saadeghi/daisyui/blob/master/LICENSE
|
192 | [npm-url]: https://www.npmjs.com/package/daisyui
|
193 | [gh-url]: https://github.com/saadeghi/daisyui
|
194 | [tw-play-url]: https://play.tailwindcss.com/5du2H2Kyvq
|
195 | [codepen-url]: https://codepen.io/saadeghi/pen/gOwWKvv
|
196 | [unpkg-url]: https://unpkg.com/browse/daisyui/
|
197 | [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
|
198 | [build-url]: https://github.com/saadeghi/daisyui/actions
|
199 | [tweet-url]: https://twitter.com/intent/tweet?text=DaisyUI%20%0D%0AUI%20Components%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
|
200 | [number-of-components]: https://badgen.net/badge/components%20added/35/green
|
201 |
|
202 | [docs-url-install]: https://daisyui.com/docs/install
|
203 | [docs-url]: https://daisyui.com/
|
204 | [logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
|
205 | [banner-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/card-3.png
|
206 |
|
207 |
|