Cline rules

1# daisyUI 5
2daisyUI 5 is a CSS library for Tailwind CSS 4
3daisyUI 5 provides class names for common UI components
4 
5- [daisyUI 5 docs](http://daisyui.com)
6- [Guide: How to use this file in LLMs and code editors](https://daisyui.com/docs/editor/)
7- [daisyUI 5 release notes](https://daisyui.com/docs/v5/)
8- [daisyUI 4 to 5 upgrade guide](https://daisyui.com/docs/upgrade/)
9 
10## daisyUI 5 install notes
11[install guide](https://daisyui.com/docs/install/)
121. daisyUI 5 requires Tailwind CSS 4
132. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency.
143. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file
154. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files:
16```html
17<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
18<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
19```
205. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency)
21```css
22@import "tailwindcss";
23@plugin "daisyui";
24```
25 
26## daisyUI 5 usage rules
271. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component)
282. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn`
293. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly
304. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility
315. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
326. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
337. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred.
348. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
359. suggested - when designing , don't add a custom font unless it's necessary
3610. don't add `bg-base-100 text-base-content` to body unless it's necessary
3711. For design decisions, use Refactoring UI book best practices
38 
39daisyUI 5 class names are one of the following categories. these type names are only for reference and are not used in the actual code
40- `component`: the required component class
41- `part`: a child part of a component
42- `style`: sets a specific style to component or part
43- `behavior`: changes the behavior of component or part
44- `color`: sets a specific color to component or part
45- `size`: sets a specific size to component or part
46- `placement`: sets a specific placement to component or part
47- `direction`: sets a specific direction to component or part
48- `modifier`: modifies the component or part in a specific way
49 
50## Config
51daisyUI 5 config docs: https://daisyui.com/docs/config/
52daisyUI without config:
53```css
54@plugin "daisyui";
55```
56daisyUI config with `light` theme only:
57```css
58@plugin "daisyui" {
59  themes: light --default;
60}
61```
62daisyUI with all the default configs:
63```css
64@plugin "daisyui" {
65  themes: light --default, dark --prefersdark;
66  root: ":root";
67  include: ;
68  exclude: ;
69  prefix: ;
70  logs: true;
71}
72```
73An example config:
74In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode)
75All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `<html>` element
76root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled
77```css
78@plugin "daisyui" {
79  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
80  root: ":root";
81  include: ;
82  exclude: rootscrollgutter, checkbox;
83  prefix: daisy-;
84  logs: false;
85}
86```
87## daisyUI 5 colors
88 
89### daisyUI color names
90- `primary`: Primary brand color, The main color of your brand
91- `primary-content`: Foreground content color to use on primary color
92- `secondary`: Secondary brand color, The optional, secondary color of your brand
93- `secondary-content`: Foreground content color to use on secondary color
94- `accent`: Accent brand color, The optional, accent color of your brand
95- `accent-content`: Foreground content color to use on accent color
96- `neutral`: Neutral dark color, For not-saturated parts of UI
97- `neutral-content`: Foreground content color to use on neutral color
98- `base-100`:-100 Base surface color of page, used for blank backgrounds
99- `base-200`:-200 Base color, darker shade, to create elevations
100- `base-300`:-300 Base color, even more darker shade, to create elevations
101- `base-content`: Foreground content color to use on base color
102- `info`: Info color, For informative/helpful messages
103- `info-content`: Foreground content color to use on info color
104- `success`: Success color, For success/safe messages
105- `success-content`: Foreground content color to use on success color
106- `warning`: Warning color, For warning/caution messages
107- `warning-content`: Foreground content color to use on warning color
108- `error`: Error color, For error/danger/destructive messages
109- `error-content`: Foreground content color to use on error color
110 
111### daisyUI color rules
1121. daisyUI adds semantic color names to Tailwind CSS colors
1132. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background
1143. daisyUI color names include variables as value so they can change based the theme
1154. There's no need to use `dark:` for daisyUI color names
1165. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
1176. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes
1187. If a daisyUI color name (like `primary`) is used, it will change color based on the theme
1198. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color
1209. `*-content` colors should have a good contrast compared to their associated colors
12110. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements
122 
123### daisyUI custom theme with custom colors
124A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
125```css
126@import "tailwindcss";
127@plugin "daisyui";
128@plugin "daisyui/theme" {
129  name: "mytheme";
130  default: true; /* set as default */
131  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
132  color-scheme: light; /* color of browser-provided UI */
133 
134  --color-base-100: oklch(98% 0.02 240);
135  --color-base-200: oklch(95% 0.03 240);
136  --color-base-300: oklch(92% 0.04 240);
137  --color-base-content: oklch(20% 0.05 240);
138  --color-primary: oklch(55% 0.3 240);
139  --color-primary-content: oklch(98% 0.01 240);
140  --color-secondary: oklch(70% 0.25 200);
141  --color-secondary-content: oklch(98% 0.01 200);
142  --color-accent: oklch(65% 0.25 160);
143  --color-accent-content: oklch(98% 0.01 160);
144  --color-neutral: oklch(50% 0.05 240);
145  --color-neutral-content: oklch(98% 0.01 240);
146  --color-info: oklch(70% 0.2 220);
147  --color-info-content: oklch(98% 0.01 220);
148  --color-success: oklch(65% 0.25 140);
149  --color-success-content: oklch(98% 0.01 140);
150  --color-warning: oklch(80% 0.25 80);
151  --color-warning-content: oklch(20% 0.05 80);
152  --color-error: oklch(65% 0.3 30);
153  --color-error-content: oklch(98% 0.01 30);
154 
155  --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
156  --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
157  --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
158 
159  --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge) */
160  --size-field: 0.25rem; /* base size of fields (button, input, select, tab) */
161 
162  --border: 1px; /* border size */
163 
164  --depth: 1; /* only 0 or 1 – Adds a shadow and subtle 3D effect to components */
165  --noise: 0; /* only 0 or 1 - Adds a subtle noise effect to components */
166}
167```
168#### Rules
169- All CSS variables above are required
170- Colors can be OKLCH or hex or other formats
171 
172You can use https://daisyui.com/theme-generator/ to create your own theme
173 
174## daisyUI 5 components
175 
176### accordion
177Accordion is used for showing and hiding content but only one item can stay open at a time
178 
179[accordion docs](https://daisyui.com/components/accordion/)
180 
181#### Class names
182- component: `collapse`
183- part: `collapse-title`, `collapse-content`
184- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
185 
186#### Syntax
187```html
188<div class="collapse {MODIFIER}">{CONTENT}</div>
189```
190where content is:
191```html
192<input type="radio" name="{name}" checked="{checked}" />
193<div class="collapse-title">{title}</div>
194<div class="collapse-content">{CONTENT}</div>
195```
196 
197#### Rules
198- {MODIFIER} is optional and can have one of the modifier class names
199- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time
200- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set
201- Replace {name} with a unique name for the accordion group
202- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default
203 
204### alert
205Alert informs users about important events
206 
207[alert docs](https://daisyui.com/components/alert/)
208 
209#### Class names
210- component: `alert`
211- style: `alert-outline`, `alert-dash`, `alert-soft`
212- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error`
213- direction: `alert-vertical`, `alert-horizontal`
214 
215#### Syntax
216```html
217<div role="alert" class="alert {MODIFIER}">{CONTENT}</div>
218```
219 
220#### Rules
221- {MODIFIER} is optional and can have one of each style/color/direction class names
222- Add `sm:alert-horizontal` for responsive layouts
223 
224### avatar
225Avatars are used to show a thumbnail
226 
227[avatar docs](https://daisyui.com/components/avatar/)
228 
229#### Class names
230- component: `avatar`, `avatar-group`
231- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder`
232 
233#### Syntax
234```html
235<div class="avatar {MODIFIER}">
236  <div>
237    <img src="{image-url}" />
238  </div>
239</div>
240```
241 
242#### Rules
243- {MODIFIER} is optional and can have one of the modifier class names
244- Use `avatar-group` for containing multiple avatars
245- You can set custom sizes using `w-*` and `h-*`
246- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle`
247 
248### badge
249Badges are used to inform the user of the status of specific data
250 
251[badge docs](https://daisyui.com/components/badge/)
252 
253#### Class names
254- component: `badge`
255- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost`
256- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error`
257- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl`
258 
259#### Syntax
260```html
261<span class="badge {MODIFIER}">Badge</span>
262```
263 
264#### Rules
265- {MODIFIER} is optional and can have one of each style/color/size class names
266- Can be used inside text or buttons
267- To create an empty badge, just remove the text between the span tags
268 
269### breadcrumbs
270Breadcrumbs helps users to navigate
271 
272[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/)
273 
274#### Class names
275- component: `breadcrumbs`
276 
277#### Syntax
278```html
279<div class="breadcrumbs">
280  <ul><li><a>Link</a></li></ul>
281</div>
282```
283 
284#### Rules
285- breadcrumbs only has one main class name
286- Can contain icons inside the links
287- If you set `max-width` or the list gets larger than the container it will scroll
288 
289### button
290Buttons allow the user to take actions
291 
292[button docs](https://daisyui.com/components/button/)
293 
294#### Class names
295- component: `btn`
296- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`
297- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link`
298- behavior: `btn-active`, `btn-disabled`
299- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`
300- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle`
301 
302#### Syntax
303```html
304<button class="btn {MODIFIER}">Button</button>
305```
306#### Rules
307- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names
308- btn can be used on any html tags such as `<button>`, `<a>`, `<input>`
309- btn can have an icon before or after the text
310- set `tabindex="-1" role="button" aria-disabled="true"` if you want to disable the button using a class name
311 
312### calendar
313Calendar includes styles for different calendar libraries
314 
315[calendar docs](https://daisyui.com/components/calendar/)
316 
317#### Class names
318- component
319  - `cally (for Cally web component)`
320  - `pika-single (for the input field that opens Pikaday calendar)`
321  - `react-day-picker (for the DayPicker component)`
322 
323#### Syntax
324For Cally:
325```html
326<calendar-date class="cally">{CONTENT}</calendar-date>
327```
328For Pikaday:
329```html
330<input type="text" class="input pika-single">
331```
332For React Day Picker:
333```html
334<DayPicker className="react-day-picker">
335```
336 
337#### Rules
338- daisyUI supports Cally, Pikaday, React Day Picker
339 
340### card
341Cards are used to group and display content
342 
343[card docs](https://daisyui.com/components/card/)
344 
345#### Class names
346- component: `card`
347- part: `card-title`, `card-body`, `card-actions`
348- style: `card-border`, `card-dash`
349- modifier: `card-side`, `image-full`
350- size: `card-xs`, `card-sm`, `card-md`, `card-lg`, `card-xl`
351 
352#### Syntax
353```html
354<div class="card {MODIFIER}">
355  <figure><img src="{image-url}" alt="{alt-text}" /></figure>
356  <div class="card-body">
357    <h2 class="card-title">{title}</h2>
358    <p>{CONTENT}</p>
359    <div class="card-actions">{actions}</div>
360  </div>
361</div>
362```
363 
364#### Rules
365- {MODIFIER} is optional and can have one of the modifier class names and one of the size class names
366- `<figure>` and `<div class="card-body">` are optional
367- can use `sm:card-horizontal` for responsive layouts
368- If image is placed after `card-body`, the image will be placed at the bottom
369 
370### carousel
371Carousel show images or content in a scrollable area
372 
373[carousel docs](https://daisyui.com/components/carousel/)
374 
375#### Class names
376- component: `carousel`
377- part: `carousel-item`
378- modifier: `carousel-start`, `carousel-center`, `carousel-end`
379- direction: `carousel-horizontal`, `carousel-vertical`
380 
381#### Syntax
382```html
383<div class="carousel {MODIFIER}">{CONTENT}</div>
384```
385 
386#### Rules
387- {MODIFIER} is optional and can have one of the modifier/direction class names
388- Content is a list of `carousel-item` divs: `<div class="carousel-item"></div>`
389- To create a full-width carousel, add `w-full` to each carousel item
390 
391### chat
392Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc
393 
394[chat docs](https://daisyui.com/components/chat/)
395 
396#### Class names
397- component: `chat`
398- part: `chat-image`, `chat-header`, `chat-footer`, `chat-bubble`
399- placement: `chat-start`, `chat-end`
400- color: `chat-bubble-neutral`, `chat-bubble-primary`, `chat-bubble-secondary`, `chat-bubble-accent`, `chat-bubble-info`, `chat-bubble-success`, `chat-bubble-warning`, `chat-bubble-error`
401 
402#### Syntax
403```html
404<div class="chat {PLACEMENT}">
405  <div class="chat-image"></div>
406  <div class="chat-header"></div>
407  <div class="chat-bubble {COLOR}">Message text</div>
408  <div class="chat-footer"></div>
409</div>
410```
411 
412#### Rules
413- {PLACEMENT} is required and must be either `chat-start` or `chat-end`
414- {COLOR} is optional and can have one of the color class names
415- To add an avatar, use `<div class="chat-image avatar">` and nest the avatar content inside
416 
417### checkbox
418Checkboxes are used to select or deselect a value
419 
420[checkbox docs](https://daisyui.com/components/checkbox/)
421 
422#### Class names
423- component: `checkbox`
424- color: `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-neutral`, `checkbox-success`, `checkbox-warning`, `checkbox-info`, `checkbox-error`
425- size: `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg`, `checkbox-xl`
426 
427#### Syntax
428```html
429<input type="checkbox" class="checkbox {MODIFIER}" />
430```
431 
432#### Rules
433- {MODIFIER} is optional and can have one of each color/size class names
434 
435### collapse
436Collapse is used for showing and hiding content
437 
438[collapse docs](https://daisyui.com/components/collapse/)
439 
440#### Class names
441- component: `collapse`
442- part: `collapse-title`, `collapse-content`
443- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
444 
445#### Syntax
446```html
447<div tabindex="0" class="collapse {MODIFIER}">
448  <div class="collapse-title">{title}</div>
449  <div class="collapse-content">{CONTENT}</div>
450</div>
451```
452 
453#### Rules
454- {MODIFIER} is optional and can have one of the modifier class names
455- instead of `tabindex="0"`, you can use  `<input type="checkbox">` as a first child
456- Can also be a details/summary tag
457 
458### countdown
459Countdown gives you a transition effect when you change a number between 0 to 99
460 
461[countdown docs](https://daisyui.com/components/countdown/)
462 
463#### Class names
464- component: `countdown`
465 
466#### Syntax
467```html
468<span class="countdown">
469  <span style="--value:{number};">number</span>
470</span>
471```
472 
473#### Rules
474- The `--value` CSS variable and text must be a number between 0 and 99
475- you need to change the span text and the `--value` CSS variable using JS
476- you need to add `aria-live="polite"` and `aria-label="{number}"` so screen readers can properly read changes
477 
478### diff
479Diff component shows a side-by-side comparison of two items
480 
481[diff docs](https://daisyui.com/components/diff/)
482 
483#### Class names
484- component: `diff`
485- part: `diff-item-1`, `diff-item-2`, `diff-resizer`
486 
487#### Syntax
488```html
489<figure class="diff">
490  <div class="diff-item-1">{item1}</div>
491  <div class="diff-item-2">{item2}</div>
492  <div class="diff-resizer"></div>
493</figure>
494```
495 
496#### Rules
497- To maintain aspect ratio, add `aspect-16/9` or other aspect ratio classes to `<figure class="diff">` element
498 
499### divider
500Divider will be used to separate content vertically or horizontally
501 
502[divider docs](https://daisyui.com/components/divider/)
503 
504#### Class names
505- component: `divider`
506- color: `divider-neutral`, `divider-primary`, `divider-secondary`, `divider-accent`, `divider-success`, `divider-warning`, `divider-info`, `divider-error`
507- direction: `divider-vertical`, `divider-horizontal`
508- placement: `divider-start`, `divider-end`
509 
510#### Syntax
511```html
512<div class="divider {MODIFIER}">{text}</div>
513```
514 
515#### Rules
516- {MODIFIER} is optional and can have one of each direction/color/placement class names
517- Omit text for a blank divider
518 
519### dock
520Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen
521 
522[dock docs](https://daisyui.com/components/dock/)
523 
524#### Class names
525- component: `dock`
526- part: `dock-label`
527- modifier: `dock-active`
528- size: `dock-xs`, `dock-sm`, `dock-md`, `dock-lg`, `dock-xl`
529 
530#### Syntax
531```html
532<div class="dock {MODIFIER}">{CONTENT}</div>
533```
534where content is a list of buttons:
535```html
536<button>
537    <svg>{icon}</svg>
538    <span class="dock-label">Text</span>
539</button>
540```
541 
542#### Rules
543- {MODIFIER} is optional and can have one of the size class names
544- To make a button active, add `dock-active` class to the button
545- add `<meta name="viewport" content="viewport-fit=cover">` is required for responsivness of the dock in iOS
546 
547### drawer
548Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page
549 
550[drawer docs](https://daisyui.com/components/drawer/)
551 
552#### Class names
553- component: `drawer`
554- part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay`
555- placement: `drawer-end`
556- modifier: `drawer-open`
557 
558#### Syntax
559```html
560<div class="drawer {MODIFIER}">
561  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
562  <div class="drawer-content">{CONTENT}</div>
563  <div class="drawer-side">{SIDEBAR}</div>
564</div>
565```
566where {CONTENT} can be navbar, site content, footer, etc
567and {SIDEBAR} can be a menu like:
568```html
569<ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
570  <li><a>Item 1</a></li>
571  <li><a>Item 2</a></li>
572</ul>
573```
574 
575#### Rules
576- {MODIFIER} is optional and can have one of the modifier/placement class names
577- `id` is required for the `drawer-toggle` input. change `my-drawer` to a unique id according to your needs
578- `lg:drawer-open` can be used to make sidebar visible on larger screens
579- `drawer-toggle` is a hidden checkbox. Use label with "for" attribute to toggle state
580- if you want to open the drawer when a button is clicked, use `<label for="my-drawer" class="btn drawer-button">Open drawer</label>` where `my-drawer` is the id of the `drawer-toggle` input
581- when using drawer, every page content must be inside `drawer-content` element. for example navbar, footer, etc should not be outside of `drawer`
582 
583### dropdown
584Dropdown can open a menu or any other element when the button is clicked
585 
586[dropdown docs](https://daisyui.com/components/dropdown/)
587 
588#### Class names
589- component: `dropdown`
590- part: `dropdown-content`
591- placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right`
592- modifier: `dropdown-hover`, `dropdown-open`
593 
594#### Syntax
595Using details and summary
596```html
597<details class="dropdown">
598  <summary>Button</summary>
599  <ul class="dropdown-content">{CONTENT}</ul>
600</details>
601```
602 
603Using popover API
604```html
605<button popovertarget="{id}" style="anchor-name:--{anchor}">{button}</button>
606<ul class="dropdown-content" popover id="{id}" style="position-anchor:--{anchor}">{CONTENT}</ul>
607```
608 
609Using CSS focus
610```html
611<div class="dropdown">
612  <div tabindex="0" role="button">Button</div>
613  <ul tabindex="0" class="dropdown-content">{CONTENT}</ul>
614</div>
615```
616 
617#### Rules
618- {MODIFIER} is optional and can have one of the modifier/placement class names
619- replace `{id}` and `{anchor}` with a unique name
620- For CSS focus dropdowns, use `tabindex="0"` and `role="button"` on the button
621- The content can be any HTML element (not just `<ul>`)
622 
623### fieldset
624Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description
625 
626[fieldset docs](https://daisyui.com/components/fieldset/)
627 
628#### Class names
629- Component: `fieldset`, `label`
630- Parts: `fieldset-legend`
631 
632#### Syntax
633```html
634<fieldset class="fieldset">
635  <legend class="fieldset-legend">{title}</legend>
636  {CONTENT}
637  <p class="label">{description}</p>
638</fieldset>
639```
640 
641#### Rules
642- You can use any element as a direct child of fieldset to add form elements
643 
644### file-input
645File Input is a an input field for uploading files
646 
647[file-input docs](https://daisyui.com/components/file-input/)
648 
649#### Class Names:
650- Component: `file-input`
651- Style: `file-input-ghost`
652- Color: `file-input-neutral`, `file-input-primary`, `file-input-secondary`, `file-input-accent`, `file-input-info`, `file-input-success`, `file-input-warning`, `file-input-error`
653- Size: `file-input-xs`, `file-input-sm`, `file-input-md`, `file-input-lg`, `file-input-xl`
654 
655#### Syntax
656```html
657<input type="file" class="file-input {MODIFIER}" />
658```
659 
660#### Rules
661- {MODIFIER} is optional and can have one of each style/color/size class names
662 
663### filter
664Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option
665 
666[filter docs](https://daisyui.com/components/filter/)
667 
668#### Class names
669- component: `filter`
670- part: `filter-reset`
671 
672#### Syntax
673Using HTML form
674```html
675<form class="filter">
676  <input class="btn btn-square" type="reset" value="×"/>
677  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
678  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
679</form>
680```
681Without HTML form
682```html
683<div class="filter">
684  <input class="btn filter-reset" type="radio" name="{NAME}" aria-label="×"/>
685  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
686  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
687</div>
688```
689 
690#### Rules
691- replace `{NAME}` with proper value, according to the context of the filter
692- Each set of radio inputs must have unique `name` attributes to avoid conflicts
693- Use `<form>` tag when possible and only use `<div>` if you can't use a HTML form for some reason
694- Use `filter-reset` class for the reset button
695 
696### footer
697Footer can contain logo, copyright notice, and links to other pages
698 
699[footer docs](https://daisyui.com/components/footer/)
700 
701#### Class names
702- component: `footer`
703- part: `footer-title`
704- placement: `footer-center`
705- direction: `footer-horizontal`, `footer-vertical`
706 
707#### Syntax
708```html
709<footer class="footer {MODIFIER}">{CONTENT}</footer>
710```
711where content can contain several `<nav>` tags with `footer-title` and links inside
712 
713#### Rules
714- {MODIFIER} is optional and can have one of each placement/direction class names
715- try to use `sm:footer-horizontal` to make footer responsive
716- suggestion - use `base-200` for background color
717 
718### hero
719Hero is a component for displaying a large box or image with a title and description
720 
721[hero docs](https://daisyui.com/components/hero/)
722 
723#### Class names
724- component: `hero`
725- part: `hero-content`, `hero-overlay`
726 
727#### Syntax
728```html
729<div class="hero {MODIFIER}">{CONTENT}</div>
730```
731 
732#### Rules
733- {MODIFIER} is optional
734- Use `hero-content` for the text content
735- Use `hero-overlay` inside the hero to overlay the background image with a color
736- Content can contain a figure
737 
738### indicator
739Indicators are used to place an element on the corner of another element
740 
741[indicator docs](https://daisyui.com/components/indicator/)
742 
743#### Class names
744- component: `indicator`
745- part: `indicator-item`
746- placement: `indicator-start`, `indicator-center`, `indicator-end`, `indicator-top`, `indicator-middle`, `indicator-bottom`
747 
748#### Syntax
749```html
750<div class="indicator">
751  <span class="indicator-item">{indicator content}</span>
752  <div>{main content}</div>
753</div>
754```
755 
756#### Rules
757- Add all indicator elements (with `indicator-item` class) before the main content
758- {placement} is optional and can have one of each horizontal/vertical class names. default is `indicator-end indicator-top`
759 
760### input
761Text Input is a simple input field
762 
763[input docs](https://daisyui.com/components/input/)
764 
765#### Class names
766- component: `input`
767- style: `input-ghost`
768- color: `input-neutral`, `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error`
769- size: `input-xs`, `input-sm`, `input-md`, `input-lg`, `input-xl`
770 
771#### Syntax
772```html
773<input type="{type}" placeholder="Type here" class="input {MODIFIER}" />
774```
775 
776#### Rules
777- {MODIFIER} is optional and can have one of each style/color/size class names
778- Can be used with any input field type (text, password, email, etc.)
779- Use `input` class for the parent when you have more than one element inside input
780 
781### join
782Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items
783 
784[join docs](https://daisyui.com/components/join/)
785 
786#### Class names
787- component: `join`, `join-item`
788- direction: `join-vertical`, `join-horizontal`
789 
790#### Syntax
791```html
792<div class="join {MODIFIER}">{CONTENT}</div>
793```
794 
795#### Rules
796- {MODIFIER} is optional and can have one of the direction class names
797- Any direct child of the join element will get joined together
798- Any element with `join-item` will be affected
799- Use `lg:join-horizontal` for responsive layouts
800 
801### kbd
802Kbd is used to display keyboard shortcuts
803 
804[kbd docs](https://daisyui.com/components/kbd/)
805 
806#### Class names
807- component: `kbd`
808- size: `kbd-xs`, `kbd-sm`, `kbd-md`, `kbd-lg`, `kbd-xl`
809 
810#### Syntax
811```html
812<kbd class="kbd {MODIFIER}">K</kbd>
813```
814 
815#### Rules
816- {MODIFIER} is optional and can have one of the size class names
817 
818### label
819Label is used to provide a name or title for an input field. Label can be placed before or after the field
820 
821[label docs](https://daisyui.com/components/label/)
822 
823#### Class names
824- component: `label`, `floating-label`
825 
826#### Syntax
827For regular label:
828```html
829<label class="input">
830  <span class="label">{label text}</span>
831  <input type="text" placeholder="Type here" />
832</label>
833```
834For floating label:
835```html
836<label class="floating-label">
837  <input type="text" placeholder="Type here" class="input" />
838  <span>{label text}</span>
839</label>
840```
841 
842#### Rules
843- The `input` class is for styling the parent element which contains the input field and label, so the label does not have the 'input' class
844- Use `floating-label` for the parent of an input field and a span that floats above the input field when the field is focused
845 
846### link
847Link adds the missing underline style to links
848 
849[link docs](https://daisyui.com/components/link/)
850 
851#### Class names
852- component: `link`
853- style: `link-hover`
854- color: `link-neutral`, `link-primary`, `link-secondary`, `link-accent`, `link-success`, `link-info`, `link-warning`, `link-error`
855 
856#### Syntax
857```html
858<a class="link {MODIFIER}">Click me</a>
859```
860 
861#### Rules
862- {MODIFIER} is optional and can have one of the modifier class names
863 
864### list
865List is a vertical layout to display information in rows
866 
867[list docs](https://daisyui.com/components/list/)
868 
869#### Class Names:
870- Component: `list`, `list-row`
871- Modifier: `list-col-wrap`, `list-col-grow`
872 
873#### Syntax
874```html
875<ul class="list">
876  <li class="list-row">{CONTENT}</li>
877</ul>
878```
879 
880#### Rules
881- Use `list-row` for each item inside the list
882- By default, the second child of the `list-row` will fill the remaining space. You can use `list-col-grow` on another child to make it fill the remaining space instead
883- Use `list-col-wrap` to force an item to wrap to the next line
884 
885### loading
886Loading shows an animation to indicate that something is loading
887 
888[loading docs](https://daisyui.com/components/loading/)
889 
890#### Class names
891- component: `loading`
892- style: `loading-spinner`, `loading-dots`, `loading-ring`, `loading-ball`, `loading-bars`, `loading-infinity`
893- size: `loading-xs`, `loading-sm`, `loading-md`, `loading-lg`, `loading-xl`
894 
895#### Syntax
896```html
897<span class="loading {MODIFIER}"></span>
898```
899 
900#### Rules
901- {MODIFIER} is optional and can have one of the style/size class names
902 
903### mask
904Mask crops the content of the element to common shapes
905 
906[mask docs](https://daisyui.com/components/mask/)
907 
908#### Class names
909- component: `mask`
910- style: `mask-squircle`, `mask-heart`, `mask-hexagon`, `mask-hexagon-2`, `mask-decagon`, `mask-pentagon`, `mask-diamond`, `mask-square`, `mask-circle`, `mask-star`, `mask-star-2`, `mask-triangle`, `mask-triangle-2`, `mask-triangle-3`, `mask-triangle-4`
911- modifier: `mask-half-1`, `mask-half-2`
912 
913#### Syntax
914```html
915<img class="mask {MODIFIER}" src="{image-url}" />
916```
917 
918#### Rules
919- {MODIFIER} is required and can have one of the style/modifier class names
920- You can change the shape of any element using `mask` class names
921- You can set custom sizes using `w-*` and `h-*`
922 
923### menu
924Menu is used to display a list of links vertically or horizontally
925 
926[menu docs](https://daisyui.com/components/menu/)
927 
928#### Class names
929- component: `menu`
930- part: `menu-title`, `menu-dropdown`, `menu-dropdown-toggle`
931- modifier: `menu-disabled`, `menu-active`, `menu-focus`, `menu-dropdown-show`
932- size: `menu-xs`, `menu-sm`, `menu-md`, `menu-lg`, `menu-xl`
933- direction: `menu-vertical`, `menu-horizontal`
934 
935#### Syntax
936Vertical menu:
937```html
938<ul class="menu">
939  <li><button>Item</button></li>
940</ul>
941```
942Horizontal menu:
943```html
944<ul class="menu menu-horizontal">
945  <li><button>Item</button></li>
946</ul>
947```
948 
949#### Rules
950- {MODIFIER} is optional and can have one of the modifier/size/direction class names
951- Use `lg:menu-horizontal` for responsive layouts
952- Use `menu-title` for list item title
953- Use `<details>` tag to make submenus collapsible
954- Use `menu-dropdown` and `menu-dropdown-toggle` to toggle the dropdown using JS
955 
956### mockup-browser
957Browser mockup shows a box that looks like a browser window
958 
959[mockup-browser docs](https://daisyui.com/components/mockup-browser/)
960 
961#### Class names
962- component: `mockup-browser`
963- part: `mockup-browser-toolbar`
964 
965#### Syntax
966```html
967<div class="mockup-browser">
968  <div class="mockup-browser-toolbar">
969    {toolbar content}
970  </div>
971  <div>{CONTENT}</div>
972</div>
973```
974 
975#### Rules
976- For a default mockup, use just `mockup-browser` class name
977- To set a URL in toolbar, add a div with `input` class
978 
979### mockup-code
980Code mockup is used to show a block of code in a box that looks like a code editor
981 
982[mockup-code docs](https://daisyui.com/components/mockup-code/)
983 
984#### Class names
985- component: `mockup-code`
986 
987#### Syntax
988```html
989<div class="mockup-code">
990  <pre data-prefix="$"><code>npm i daisyui</code></pre>
991</div>
992```
993 
994#### Rules
995- Use `<pre data-prefix="{prefix}">` to show a prefix before each line
996- Use `<code>` tag to add code syntax highlighting (requires additional library)
997- To highlight a line, add background/text color
998 
999### mockup-phone
1000Phone mockup shows a mockup of an iPhone
1001 
1002[mockup-phone docs](https://daisyui.com/components/mockup-phone/)
1003 
1004#### Class names
1005- component: `mockup-phone`
1006- part: `mockup-phone-camera`, `mockup-phone-display`
1007 
1008#### Syntax
1009```html
1010<div class="mockup-phone">
1011  <div class="mockup-phone-camera"></div>
1012  <div class="mockup-phone-display">{CONTENT}</div>
1013</div>
1014```
1015 
1016#### Rules
1017- Inside `mockup-phone-display` you can add anything
1018 
1019### mockup-window
1020Window mockup shows a box that looks like an operating system window
1021 
1022[mockup-window docs](https://daisyui.com/components/mockup-window/)
1023 
1024#### Class names
1025- component: `mockup-window`
1026 
1027#### Syntax
1028```html
1029<div class="mockup-window">
1030  <div>{CONTENT}</div>
1031</div>
1032```
1033 
1034### modal
1035Modal is used to show a dialog or a box when you click a button
1036 
1037[modal docs](https://daisyui.com/components/modal/)
1038 
1039#### Class names
1040- component: `modal`
1041- part: `modal-box`, `modal-action`, `modal-backdrop`, `modal-toggle`
1042- modifier: `modal-open`
1043- placement: `modal-top`, `modal-middle`, `modal-bottom`, `modal-start`, `modal-end`
1044 
1045#### Syntax
1046Using HTML dialog element
1047```html
1048<button onclick="my_modal.showModal()">Open modal</button>
1049<dialog id="my_modal" class="modal">
1050  <div class="modal-box">{CONTENT}</div>
1051  <form method="dialog" class="modal-backdrop"><button>close</button></form>
1052</dialog>
1053```
1054 
1055Using checkbox (legacy)
1056```html
1057<label for="my-modal" class="btn">Open modal</label>
1058<input type="checkbox" id="my-modal" class="modal-toggle" />
1059<div class="modal">
1060  <div class="modal-box">{CONTENT}</div>
1061  <label class="modal-backdrop" for="my-modal">Close</label>
1062</div>
1063```
1064 
1065Using anchor links (legacy)
1066```html
1067<a href="#my-modal" class="btn">Open modal</a>
1068<div class="modal" id="my-modal">
1069  <div class="modal-box">{CONTENT}</div>
1070</div>
1071```
1072 
1073#### Rules
1074- {MODIFIER} is optional and can have one of the modifier/placement class names
1075- Add `tabindex="0"` to make modal focusable
1076- Use unique IDs for each modal
1077- For HTML dialog element modals, add `<form method="dialog">` for closing the modal with submit
1078 
1079### navbar
1080Navbar is used to show a navigation bar on the top of the page
1081 
1082[navbar docs](https://daisyui.com/components/navbar/)
1083 
1084#### Class names
1085- component: `navbar`
1086- part: `navbar-start`, `navbar-center`, `navbar-end`
1087 
1088#### Syntax
1089```html
1090<div class="navbar">{CONTENT}</div>
1091```
1092 
1093#### Rules
1094- use `navbar-start`, `navbar-center`, `navbar-end` to position content horizontally
1095- put anything inside each section
1096- suggestion - use `base-200` for background color
1097 
1098### pagination
1099Pagination is a group of buttons
1100 
1101[pagination docs](https://daisyui.com/components/pagination/)
1102 
1103#### Class names
1104- component: `join`
1105- part: `join-item`
1106- direction: `join-vertical`, `join-horizontal`
1107 
1108#### Syntax
1109```html
1110<div class="join">{CONTENT}</div>
1111```
1112 
1113#### Rules
1114- Use `join-item` for each button or link inside the pagination
1115- Use `btn` class for styling pagination items
1116 
1117### progress
1118Progress bar can be used to show the progress of a task or to show the passing of time
1119 
1120[progress docs](https://daisyui.com/components/progress/)
1121 
1122#### Class names
1123- component: `progress`
1124- color: `progress-neutral`, `progress-primary`, `progress-secondary`, `progress-accent`, `progress-info`, `progress-success`, `progress-warning`, `progress-error`
1125 
1126#### Syntax
1127```html
1128<progress class="progress {MODIFIER}" value="50" max="100"></progress>
1129```
1130 
1131#### Rules
1132- {MODIFIER} is optional and can have one of the color class names
1133- You must specify value and max attributes
1134 
1135### radial-progress
1136Radial progress can be used to show the progress of a task or to show the passing of time
1137 
1138[radial-progress docs](https://daisyui.com/components/radial-progress/)
1139 
1140#### Class names
1141- component: `radial-progress`
1142 
1143#### Syntax
1144```html
1145<div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>
1146```
1147 
1148#### Rules
1149- The `--value` CSS variable and text must be a number between 0 and 100
1150- you need to add `aria-valuenow="{value}"`, `aria-valuenow={value}` so screen readers can properly read value and also show that its a progress element to them
1151- Use `div` instead of progress because browsers can't show text inside progress tag
1152- Use `--size` for setting size (default 5rem) and `--thickness` to set how thick the indicator is
1153 
1154### radio
1155Radio buttons allow the user to select one option
1156 
1157[radio docs](https://daisyui.com/components/radio/)
1158 
1159#### Class names
1160- component: `radio`
1161- color: `radio-neutral`, `radio-primary`, `radio-secondary`, `radio-accent`, `radio-success`, `radio-warning`, `radio-info`, `radio-error`
1162- size: `radio-xs`, `radio-sm`, `radio-md`, `radio-lg`, `radio-xl`
1163 
1164#### Syntax
1165```html
1166<input type="radio" name="{name}" class="radio {MODIFIER}" />
1167```
1168 
1169#### Rules
1170- {MODIFIER} is optional and can have one of the size/color class names
1171- Replace {name} with a unique name for the radio group
1172- Each set of radio inputs should have unique `name` attributes to avoid conflicts with other sets of radio inputs on the same page
1173 
1174### range
1175Range slider is used to select a value by sliding a handle
1176 
1177[range docs](https://daisyui.com/components/range/)
1178 
1179#### Class names
1180- component: `range`
1181- color: `range-neutral`, `range-primary`, `range-secondary`, `range-accent`, `range-success`, `range-warning`, `range-info`, `range-error`
1182- size: `range-xs`, `range-sm`, `range-md`, `range-lg`, `range-xl`
1183 
1184#### Syntax
1185```html
1186<input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />
1187```
1188 
1189#### Rules
1190- {MODIFIER} is optional and can have one of each color/size class names
1191- You must specify `min` and `max` attributes
1192 
1193### rating
1194Rating is a set of radio buttons that allow the user to rate something
1195 
1196[rating docs](https://daisyui.com/components/rating/)
1197 
1198#### Class names
1199- component: `rating`
1200- modifier: `rating-half`, `rating-hidden`
1201- size: `rating-xs`, `rating-sm`, `rating-md`, `rating-lg`, `rating-xl`
1202 
1203#### Syntax
1204```html
1205<div class="rating {MODIFIER}">
1206  <input type="radio" name="rating-1" class="mask mask-star" />
1207</div>
1208```
1209 
1210#### Rules
1211- {MODIFIER} is optional and can have one of the modifier/size class names
1212- Each set of rating inputs should have unique `name` attributes to avoid conflicts with other ratings on the same page
1213- Add `rating-hidden` for the first radio to make it hidden so user can clear the rating
1214 
1215### select
1216Select is used to pick a value from a list of options
1217 
1218[select docs](https://daisyui.com/components/select/)
1219 
1220#### Class names
1221- component: `select`
1222- style: `select-ghost`
1223- color: `select-neutral`, `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error`
1224- size: `select-xs`, `select-sm`, `select-md`, `select-lg`, `select-xl`
1225 
1226#### Syntax
1227```html
1228<select class="select {MODIFIER}">
1229  <option>Option</option>
1230</select>
1231```
1232 
1233#### Rules
1234- {MODIFIER} is optional and can have one of each style/color/size class names
1235 
1236### skeleton
1237Skeleton is a component that can be used to show a loading state
1238 
1239[skeleton docs](https://daisyui.com/components/skeleton/)
1240 
1241#### Class names
1242- component: `skeleton`
1243 
1244#### Syntax
1245```html
1246<div class="skeleton"></div>
1247```
1248 
1249#### Rules
1250- Add `h-*` and `w-*` utility classes to set height and width
1251 
1252### stack
1253Stack visually puts elements on top of each other
1254 
1255[stack docs](https://daisyui.com/components/stack/)
1256 
1257#### Class Names:
1258- Component: `stack`
1259- Modifier: `stack-top`, `stack-bottom`, `stack-start`, `stack-end`
1260 
1261#### Syntax
1262```html
1263<div class="stack {MODIFIER}">{CONTENT}</div>
1264```
1265 
1266#### Rules
1267- {MODIFIER} is optional and can have one of the modifier class names
1268- You can use `w-*` and `h-*` classes to set the width and height of the stack, making all items the same size
1269 
1270### stat
1271Stat is used to show numbers and data in a block
1272 
1273[stat docs](https://daisyui.com/components/stat/)
1274 
1275#### Class names
1276- Component: `stats`
1277- Part: `stat`, `stat-title`, `stat-value`, `stat-desc`, `stat-figure`, `stat-actions`
1278- Direction: `stats-horizontal`, `stats-vertical`
1279 
1280#### Syntax
1281```html
1282<div class="stats {MODIFIER}">
1283  <div class="stat">{CONTENT}</div>
1284</div>
1285```
1286 
1287#### Rules
1288- {MODIFIER} is optional and can have one of the direction class names
1289- It's horizontal by default but you can make it vertical with the `stats-vertical` class
1290- Content includes `stat-title`, `stat-value`, `stat-desc` inside a `stat`
1291 
1292### status
1293Status is a really small icon to visually show the current status of an element, like online, offline, error, etc
1294 
1295[status docs](https://daisyui.com/components/status/)
1296 
1297#### Class Names:
1298- Component: `status`
1299- Color: `status-neutral`, `status-primary`, `status-secondary`, `status-accent`, `status-info`, `status-success`, `status-warning`, `status-error`
1300- Size: `status-xs`, `status-sm`, `status-md`, `status-lg`, `status-xl`
1301 
1302#### Syntax
1303```html
1304<span class="status {MODIFIER}"></span>
1305```
1306 
1307#### Rules
1308- {MODIFIER} is optional and can have one of the color/size class names
1309- This component does not render anything visible
1310 
1311### steps
1312Steps can be used to show a list of steps in a process
1313 
1314[steps docs](https://daisyui.com/components/steps/)
1315 
1316#### Class Names:
1317- Component: `steps`
1318- Part: `step`, `step-icon`
1319- Color: `step-neutral`, `step-primary`, `step-secondary`, `step-accent`, `step-info`, `step-success`, `step-warning`, `step-error`
1320- Direction: `steps-vertical`, `steps-horizontal`
1321 
1322#### Syntax
1323```html
1324<ul class="steps {MODIFIER}">
1325  <li class="step">{step content}</li>
1326</ul>
1327```
1328 
1329#### Rules
1330- {MODIFIER} is optional and can have one of each direction/color class names
1331- To make a step active, add the `step-primary` class
1332- You can add an icon in each step using `step-icon` class
1333- To display data in `data-content` ,use `data-content="{value}"` at the `<li>`
1334 
1335### swap
1336Swap allows you to toggle the visibility of two elements using a checkbox or a class name
1337 
1338[swap docs](https://daisyui.com/components/swap/)
1339 
1340#### Class Names:
1341- Component: `swap`
1342- Part: `swap-on`, `swap-off`, `swap-indeterminate`
1343- Modifier: `swap-active`
1344- Style: `swap-rotate`, `swap-flip`
1345 
1346#### Syntax
1347Using checkbox
1348```html
1349<label class="swap {MODIFIER}">
1350  <input type="checkbox" />
1351  <div class="swap-on">{content when active}</div>
1352  <div class="swap-off">{content when inactive}</div>
1353</label>
1354```
1355 
1356Using class name
1357```html
1358<div class="swap {MODIFIER}">
1359  <div class="swap-on">{content when active}</div>
1360  <div class="swap-off">{content when inactive}</div>
1361</div>
1362```
1363 
1364#### Rules
1365- {MODIFIER} is optional and can have one of the modifier/style class names
1366- Use only a hidden checkbox to control swap state or add/remove the `swap-active` class using JS to control state
1367- To show something when the checkbox is indeterminate, use `swap-indeterminate` class
1368 
1369### tab
1370Tabs can be used to show a list of links in a tabbed format
1371 
1372[tab docs](https://daisyui.com/components/tab/)
1373 
1374#### Class Names:
1375- Component: `tabs`
1376- Part: `tab`, `tab-content`
1377- Style: `tabs-box`, `tabs-border`, `tabs-lift`
1378- Modifier: `tab-active`, `tab-disabled`
1379- Placement: `tabs-top`, `tabs-bottom`
1380 
1381#### Syntax
1382Using buttons:
1383```html
1384<div role="tablist" class="tabs {MODIFIER}">
1385  <button role="tab" class="tab">Tab</button>
1386</div>
1387```
1388 
1389Using radio inputs:
1390```html
1391<div role="tablist" class="tabs tabs-box">
1392  <input type="radio" name="my_tabs" class="tab" aria-label="Tab" />
1393</div>
1394```
1395 
1396#### Rules
1397- {MODIFIER} is optional and can have one of the style/size class names
1398- Radio inputs are needed for tab content to work with tab click
1399- If tabs gets a background then every tab inside it becomes rounded from both top corners
1400 
1401### table
1402Table can be used to show a list of data in a table format
1403 
1404[table docs](https://daisyui.com/components/table/)
1405 
1406#### Class Names:
1407- Component: `table`
1408- Modifier: `table-zebra`, `table-pin-rows`, `table-pin-cols`
1409- Size: `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl`
1410 
1411#### Syntax
1412```html
1413<div class="overflow-x-auto">
1414  <table class="table {MODIFIER}">
1415    <thead>
1416      <tr>
1417        <th></th>
1418      </tr>
1419    </thead>
1420    <tbody>
1421      <tr>
1422        <th></th>
1423      </tr>
1424    </tbody>
1425  </table>
1426</div>
1427```
1428 
1429#### Rules
1430- {MODIFIER} is optional and can have one of each modifier/size class names
1431- The `overflow-x-auto` class is added to the wrapper div to make the table horizontally scrollable on smaller screens
1432 
1433### textarea
1434Textarea allows users to enter text in multiple lines
1435 
1436[textarea docs](https://daisyui.com/components/textarea/)
1437 
1438#### Class Names:
1439- Component: `textarea`
1440- Style: `textarea-ghost`
1441- Color: `textarea-neutral`, `textarea-primary`, `textarea-secondary`, `textarea-accent`, `textarea-info`, `textarea-success`, `textarea-warning`, `textarea-error`
1442- Size: `textarea-xs`, `textarea-sm`, `textarea-md`, `textarea-lg`, `textarea-xl`
1443 
1444#### Syntax
1445```html
1446<textarea class="textarea {MODIFIER}" placeholder="Bio"></textarea>
1447```
1448 
1449#### Rules
1450- {MODIFIER} is optional and can have one of each style/color/size class names
1451 
1452### theme-controller
1453If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value
1454 
1455[theme-controller docs](https://daisyui.com/components/theme-controller/)
1456 
1457#### Class names
1458- component: `theme-controller`
1459 
1460#### Syntax
1461```html
1462<input type="checkbox" value="{theme-name}" class="theme-controller" />
1463```
1464 
1465#### Rules
1466- The value attribute of the input element should be a valid daisyUI theme name
1467 
1468### timeline
1469Timeline component shows a list of events in chronological order
1470 
1471[timeline docs](https://daisyui.com/components/timeline/)
1472 
1473#### Class Names:
1474- Component: `timeline`
1475- Part: `timeline-start`, `timeline-middle`, `timeline-end`
1476- Modifier: `timeline-snap-icon`, `timeline-box`, `timeline-compact`
1477- Direction: `timeline-vertical`, `timeline-horizontal`
1478 
1479#### Syntax
1480```html
1481<ul class="timeline {MODIFIER}">
1482  <li>
1483    <div class="timeline-start">{start}</div>
1484    <div class="timeline-middle">{icon}</div>
1485    <div class="timeline-end">{end}</div>
1486  </li>
1487</ul>
1488```
1489 
1490#### Rules
1491- {MODIFIER} is optional and can have one of the modifier/direction class names
1492- To make a vertical timeline, add the `timeline-vertical` class to the `ul` element or just do nothing (because its the default style.)
1493- Add `timeline-snap-icon` to snap the icon to the start instead of middle
1494- Add the `timeline-compact` class to force all items on one side
1495 
1496### toast
1497Toast is a wrapper to stack elements, positioned on the corner of page
1498 
1499[toast docs](https://daisyui.com/components/toast/)
1500 
1501#### Class Names:
1502- Component: `toast`
1503- Placement: `toast-start`, `toast-center`, `toast-end`, `toast-top`, `toast-middle`, `toast-bottom`
1504 
1505#### Syntax
1506```html
1507<div class="toast {MODIFIER}">{CONTENT}</div>
1508```
1509 
1510#### Rules
1511- {MODIFIER} is optional and can have one of the placement class names
1512 
1513### toggle
1514Toggle is a checkbox that is styled to look like a switch button
1515 
1516[toggle docs](https://daisyui.com/components/toggle/)
1517 
1518#### Class Names:
1519- Component: `toggle`
1520- Color: `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-neutral`, `toggle-success`, `toggle-warning`, `toggle-info`, `toggle-error`
1521- Size: `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg`, `toggle-xl`
1522 
1523#### Syntax
1524```html
1525<input type="checkbox" class="toggle {MODIFIER}" />
1526```
1527 
1528#### Rules
1529- {MODIFIER} is optional and can have one of each color/size class names
1530 
1531### validator
1532Validator class changes the color of form elements to error or success based on input's validation rules
1533 
1534[validator docs](https://daisyui.com/components/validator/)
1535 
1536#### Class names
1537- component: `validator`
1538- part: `validator-hint`
1539 
1540#### Syntax
1541```html
1542<input type="{type}" class="input validator" required />
1543<p class="validator-hint">Error message</p>
1544```
1545 
1546#### Rules
1547- Use with `input`, `select`, `textarea`
1548