{CONTENT}

\n```\nwhere content is:\n```html\n\n

{title}

{CONTENT}

\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier class names\n- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time\n- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set\n- Replace {name} with a unique name for the accordion group\n- replace `{checked}` with `checked=\"checked\"` if you want the accordion to be open by default\n\n### alert\nAlert informs users about important events\n\n[alert docs](mdc:https:/daisyui.com/components/alert)\n\n#### Class names\n- component: `alert`\n- style: `alert-outline`, `alert-dash`, `alert-soft`\n- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error`\n- direction: `alert-vertical`, `alert-horizontal`\n\n#### Syntax\n```html\n

{CONTENT}

\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each style/color/direction class names\n- Add `sm:alert-horizontal` for responsive layouts\n\n### avatar\nAvatars are used to show a thumbnail\n\n[avatar docs](mdc:https:/daisyui.com/components/avatar)\n\n#### Class names\n- component: `avatar`, `avatar-group`\n- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder`\n\n#### Syntax\n```html\n

\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier class names\n- Use `avatar-group` for containing multiple avatars\n- You can set custom sizes using `w-*` and `h-*`\n- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle`\n\n### badge\nBadges are used to inform the user of the status of specific data\n\n[badge docs](mdc:https:/daisyui.com/components/badge)\n\n#### Class names\n- component: `badge`\n- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost`\n- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error`\n- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl`\n\n#### Syntax\n```html\nBadge\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each style/color/size class names\n- Can be used inside text or buttons\n- To create an empty badge, just remove the text between the span tags\n\n### breadcrumbs\nBreadcrumbs helps users to navigate\n\n[breadcrumbs docs](mdc:https:/daisyui.com/components/breadcrumbs)\n\n#### Class names\n- component: `breadcrumbs`\n\n#### Syntax\n```html\n

Link

\n```\n\n#### Rules\n- breadcrumbs only has one main class name\n- Can contain icons inside the links\n- If you set `max-width` or the list gets larger than the container it will scroll\n\n### button\nButtons allow the user to take actions\n\n[button docs](mdc:https:/daisyui.com/components/button)\n\n#### Class names\n- component: `btn`\n- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`\n- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link`\n- behavior: `btn-active`, `btn-disabled`\n- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`\n- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle`\n\n#### Syntax\n```html\n\n```\n#### Rules\n- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names\n- btn can be used on any html tags such as `\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the size class names\n- To make a button active, add `dock-active` class to the button\n- add `` is required for responsivness of the dock in iOS\n\n### drawer\nDrawer is a grid layout that can show/hide a sidebar on the left or right side of the page\n\n[drawer docs](mdc:https:/daisyui.com/components/drawer)\n\n#### Class names\n- component: `drawer`\n- part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay`\n- placement: `drawer-end`\n- modifier: `drawer-open`\n\n#### Syntax\n```html\n

\n \n

{CONTENT}

{SIDEBAR}

\n```\nwhere {CONTENT} can be navbar, site content, footer, etc\nand {SIDEBAR} can be a menu like:\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/placement class names\n- `id` is required for the `drawer-toggle` input. change `my-drawer` to a unique id according to your needs\n- `lg:drawer-open` can be used to make sidebar visible on larger screens\n- `drawer-toggle` is a hidden checkbox. Use label with \"for\" attribute to toggle state\n- if you want to open the drawer when a button is clicked, use `Open drawer` where `my-drawer` is the id of the `drawer-toggle` input\n- when using drawer, every page content must be inside `drawer-content` element. for example navbar, footer, etc should not be outside of `drawer`\n\n### dropdown\nDropdown can open a menu or any other element when the button is clicked\n\n[dropdown docs](mdc:https:/daisyui.com/components/dropdown)\n\n#### Class names\n- component: `dropdown`\n- part: `dropdown-content`\n- placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right`\n- modifier: `dropdown-hover`, `dropdown-open`\n\n#### Syntax\nUsing details and summary\n```html\n\n```\n\nUsing popover API\n```html\n\n\n```\n\nUsing CSS focus\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/placement class names\n- replace `{id}` and `{anchor}` with a unique name\n- For CSS focus dropdowns, use `tabindex=\"0\"` and `role=\"button\"` on the button\n- The content can be any HTML element (not just `

\n {title}\n {CONTENT}\n

{description}

\n \n \n \n

` tag when possible and only use `

` if you can't use a HTML form for some reason\n- Use `filter-reset` class for the reset button\n\n### footer\nFooter can contain logo, copyright notice, and links to other pages\n\n[footer docs](mdc:https:/daisyui.com/components/footer)\n\n#### Class names\n- component: `footer`\n- part: `footer-title`\n- placement: `footer-center`\n- direction: `footer-horizontal`, `footer-vertical`\n\n#### Syntax\n```html\n\n```\nwhere content can contain several `

` tags with `footer-title` and links inside\n\n#### Rules\n- {MODIFIER} is optional and can have one of each placement/direction class names\n- try to use `sm:footer-horizontal` to make footer responsive\n- suggestion - use `base-200` for background color\n\n### hero\nHero is a component for displaying a large box or image with a title and description\n\n[hero docs](mdc:https:/daisyui.com/components/hero)\n\n#### Class names\n- component: `hero`\n- part: `hero-content`, `hero-overlay`\n\n#### Syntax\n```html\n

{CONTENT}

\n```\n\n#### Rules\n- {MODIFIER} is optional\n- Use `hero-content` for the text content\n- Use `hero-overlay` inside the hero to overlay the background image with a color\n- Content can contain a figure\n\n### indicator\nIndicators are used to place an element on the corner of another element\n\n[indicator docs](mdc:https:/daisyui.com/components/indicator)\n\n#### Class names\n- component: `indicator`\n- part: `indicator-item`\n- placement: `indicator-start`, `indicator-center`, `indicator-end`, `indicator-top`, `indicator-middle`, `indicator-bottom`\n\n#### Syntax\n```html\n

\n {indicator content}\n

{main content}

\n```\n\n#### Rules\n- Add all indicator elements (with `indicator-item` class) before the main content\n- {placement} is optional and can have one of each horizontal/vertical class names. default is `indicator-end indicator-top`\n\n### input\nText Input is a simple input field\n\n[input docs](mdc:https:/daisyui.com/components/input)\n\n#### Class names\n- component: `input`\n- style: `input-ghost`\n- color: `input-neutral`, `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error`\n- size: `input-xs`, `input-sm`, `input-md`, `input-lg`, `input-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each style/color/size class names\n- Can be used with any input field type (text, password, email, etc.)\n- Use `input` class for the parent when you have more than one element inside input\n\n### join\nJoin 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\n\n[join docs](mdc:https:/daisyui.com/components/join)\n\n#### Class names\n- component: `join`, `join-item`\n- direction: `join-vertical`, `join-horizontal`\n\n#### Syntax\n```html\n

{CONTENT}

\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the direction class names\n- Any direct child of the join element will get joined together\n- Any element with `join-item` will be affected\n- Use `lg:join-horizontal` for responsive layouts\n\n### kbd\nKbd is used to display keyboard shortcuts\n\n[kbd docs](mdc:https:/daisyui.com/components/kbd)\n\n#### Class names\n- component: `kbd`\n- size: `kbd-xs`, `kbd-sm`, `kbd-md`, `kbd-lg`, `kbd-xl`\n\n#### Syntax\n```html\nK\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the size class names\n\n### label\nLabel is used to provide a name or title for an input field. Label can be placed before or after the field\n\n[label docs](mdc:https:/daisyui.com/components/label)\n\n#### Class names\n- component: `label`, `floating-label`\n\n#### Syntax\nFor regular label:\n```html\n\n {label text}\n \n\n```\nFor floating label:\n```html\n\n \n {label text}\n\n```\n\n#### Rules\n- 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\n- Use `floating-label` for the parent of an input field and a span that floats above the input field when the field is focused\n\n### link\nLink adds the missing underline style to links\n\n[link docs](mdc:https:/daisyui.com/components/link)\n\n#### Class names\n- component: `link`\n- style: `link-hover`\n- color: `link-neutral`, `link-primary`, `link-secondary`, `link-accent`, `link-success`, `link-info`, `link-warning`, `link-error`\n\n#### Syntax\n```html\nClick me\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier class names\n\n### list\nList is a vertical layout to display information in rows\n\n[list docs](mdc:https:/daisyui.com/components/list)\n\n#### Class Names:\n- Component: `list`, `list-row`\n- Modifier: `list-col-wrap`, `list-col-grow`\n\n#### Syntax\n```html\n

{CONTENT}

\n```\n\n#### Rules\n- Use `list-row` for each item inside the list\n- 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\n- Use `list-col-wrap` to force an item to wrap to the next line\n\n### loading\nLoading shows an animation to indicate that something is loading\n\n[loading docs](mdc:https:/daisyui.com/components/loading)\n\n#### Class names\n- component: `loading`\n- style: `loading-spinner`, `loading-dots`, `loading-ring`, `loading-ball`, `loading-bars`, `loading-infinity`\n- size: `loading-xs`, `loading-sm`, `loading-md`, `loading-lg`, `loading-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the style/size class names\n\n### mask\nMask crops the content of the element to common shapes\n\n[mask docs](mdc:https:/daisyui.com/components/mask)\n\n#### Class names\n- component: `mask`\n- 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`\n- modifier: `mask-half-1`, `mask-half-2`\n\n#### Syntax\n```html\n

\n```\n\n#### Rules\n- {MODIFIER} is required and can have one of the style/modifier class names\n- You can change the shape of any element using `mask` class names\n- You can set custom sizes using `w-*` and `h-*`\n\n### menu\nMenu is used to display a list of links vertically or horizontally\n\n[menu docs](mdc:https:/daisyui.com/components/menu)\n\n#### Class names\n- component: `menu`\n- part: `menu-title`, `menu-dropdown`, `menu-dropdown-toggle`\n- modifier: `menu-disabled`, `menu-active`, `menu-focus`, `menu-dropdown-show`\n- size: `menu-xs`, `menu-sm`, `menu-md`, `menu-lg`, `menu-xl`\n- direction: `menu-vertical`, `menu-horizontal`\n\n#### Syntax\nVertical menu:\n```html\n\n```\nHorizontal menu:\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/size/direction class names\n- Use `lg:menu-horizontal` for responsive layouts\n- Use `menu-title` for list item title\n- Use `

` tag to make submenus collapsible\n- Use `menu-dropdown` and `menu-dropdown-toggle` to toggle the dropdown using JS\n\n### mockup-browser\nBrowser mockup shows a box that looks like a browser window\n\n[mockup-browser docs](mdc:https:/daisyui.com/components/mockup-browser)\n\n#### Class names\n- component: `mockup-browser`\n- part: `mockup-browser-toolbar`\n\n#### Syntax\n```html\n

\n \n

{CONTENT}

\n```\n\n#### Rules\n- For a default mockup, use just `mockup-browser` class name\n- To set a URL in toolbar, add a div with `input` class\n\n### mockup-code\nCode mockup is used to show a block of code in a box that looks like a code editor\n\n[mockup-code docs](mdc:https:/daisyui.com/components/mockup-code)\n\n#### Class names\n- component: `mockup-code`\n\n#### Syntax\n```html\n

npm i daisyui

\n```\n\n#### Rules\n- Use `

` to show a prefix before each line\n- Use `` tag to add code syntax highlighting (requires additional library)\n- To highlight a line, add background/text color\n\n### mockup-phone\nPhone mockup shows a mockup of an iPhone\n\n[mockup-phone docs](mdc:https:/daisyui.com/components/mockup-phone)\n\n#### Class names\n- component: `mockup-phone`\n- part: `mockup-phone-camera`, `mockup-phone-display`\n\n#### Syntax\n```html\n\n  
\n  {CONTENT}
\n
\n```\n\n#### Rules\n- Inside `mockup-phone-display` you can add anything\n\n### mockup-window\nWindow mockup shows a box that looks like an operating system window\n\n[mockup-window docs](mdc:https:/daisyui.com/components/mockup-window)\n\n#### Class names\n- component: `mockup-window`\n\n#### Syntax\n```html\n\n  {CONTENT}
\n
\n```\n\n### modal\nModal is used to show a dialog or a box when you click a button\n\n[modal docs](mdc:https:/daisyui.com/components/modal)\n\n#### Class names\n- component: `modal`\n- part: `modal-box`, `modal-action`, `modal-backdrop`, `modal-toggle`\n- modifier: `modal-open`\n- placement: `modal-top`, `modal-middle`, `modal-bottom`, `modal-start`, `modal-end`\n\n#### Syntax\nUsing HTML dialog element\n```html\n\n\n  {CONTENT}
\n  \n\n```\n\nUsing checkbox (legacy)\n```html\nOpen modal\n\n\n  {CONTENT}
\n  Close\n
\n```\n\nUsing anchor links (legacy)\n```html\nOpen modal\n\n  {CONTENT}
\n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/placement class names\n- Add `tabindex=\"0\"` to make modal focusable\n- Use unique IDs for each modal\n- For HTML dialog element modals, add `` for closing the modal with submit\n\n### navbar\nNavbar is used to show a navigation bar on the top of the page\n\n[navbar docs](mdc:https:/daisyui.com/components/navbar)\n\n#### Class names\n- component: `navbar`\n- part: `navbar-start`, `navbar-center`, `navbar-end`\n\n#### Syntax\n```html\n{CONTENT}
\n```\n\n#### Rules\n- use `navbar-start`, `navbar-center`, `navbar-end` to position content horizontally\n- put anything inside each section\n- suggestion - use `base-200` for background color\n\n### pagination\nPagination is a group of buttons\n\n[pagination docs](mdc:https:/daisyui.com/components/pagination)\n\n#### Class names\n- component: `join`\n- part: `join-item`\n- direction: `join-vertical`, `join-horizontal`\n\n#### Syntax\n```html\n{CONTENT}
\n```\n\n#### Rules\n- Use `join-item` for each button or link inside the pagination\n- Use `btn` class for styling pagination items\n\n### progress\nProgress bar can be used to show the progress of a task or to show the passing of time\n\n[progress docs](mdc:https:/daisyui.com/components/progress)\n\n#### Class names\n- component: `progress`\n- color: `progress-neutral`, `progress-primary`, `progress-secondary`, `progress-accent`, `progress-info`, `progress-success`, `progress-warning`, `progress-error`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the color class names\n- You must specify value and max attributes\n\n### radial-progress\nRadial progress can be used to show the progress of a task or to show the passing of time\n\n[radial-progress docs](mdc:https:/daisyui.com/components/radial-progress)\n\n#### Class names\n- component: `radial-progress`\n\n#### Syntax\n```html\n70%
\n```\n\n#### Rules\n- The `--value` CSS variable and text must be a number between 0 and 100\n- 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\n- Use `div` instead of progress because browsers can't show text inside progress tag\n- Use `--size` for setting size (default 5rem) and `--thickness` to set how thick the indicator is\n\n### radio\nRadio buttons allow the user to select one option\n\n[radio docs](mdc:https:/daisyui.com/components/radio)\n\n#### Class names\n- component: `radio`\n- color: `radio-neutral`, `radio-primary`, `radio-secondary`, `radio-accent`, `radio-success`, `radio-warning`, `radio-info`, `radio-error`\n- size: `radio-xs`, `radio-sm`, `radio-md`, `radio-lg`, `radio-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the size/color class names\n- Replace {name} with a unique name for the radio group\n- Each set of radio inputs should have unique `name` attributes to avoid conflicts with other sets of radio inputs on the same page\n\n### range\nRange slider is used to select a value by sliding a handle\n\n[range docs](mdc:https:/daisyui.com/components/range)\n\n#### Class names\n- component: `range`\n- color: `range-neutral`, `range-primary`, `range-secondary`, `range-accent`, `range-success`, `range-warning`, `range-info`, `range-error`\n- size: `range-xs`, `range-sm`, `range-md`, `range-lg`, `range-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each color/size class names\n- You must specify `min` and `max` attributes\n\n### rating\nRating is a set of radio buttons that allow the user to rate something\n\n[rating docs](mdc:https:/daisyui.com/components/rating)\n\n#### Class names\n- component: `rating`\n- modifier: `rating-half`, `rating-hidden`\n- size: `rating-xs`, `rating-sm`, `rating-md`, `rating-lg`, `rating-xl`\n\n#### Syntax\n```html\n\n  \n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/size class names\n- Each set of rating inputs should have unique `name` attributes to avoid conflicts with other ratings on the same page\n- Add `rating-hidden` for the first radio to make it hidden so user can clear the rating\n\n### select\nSelect is used to pick a value from a list of options\n\n[select docs](mdc:https:/daisyui.com/components/select)\n\n#### Class names\n- component: `select`\n- style: `select-ghost`\n- color: `select-neutral`, `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error`\n- size: `select-xs`, `select-sm`, `select-md`, `select-lg`, `select-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each style/color/size class names\n\n### skeleton\nSkeleton is a component that can be used to show a loading state\n\n[skeleton docs](mdc:https:/daisyui.com/components/skeleton)\n\n#### Class names\n- component: `skeleton`\n\n#### Syntax\n```html\n
\n```\n\n#### Rules\n- Add `h-*` and `w-*` utility classes to set height and width\n\n### stack\nStack visually puts elements on top of each other\n\n[stack docs](mdc:https:/daisyui.com/components/stack)\n\n#### Class Names:\n- Component: `stack`\n- Modifier: `stack-top`, `stack-bottom`, `stack-start`, `stack-end`\n\n#### Syntax\n```html\n{CONTENT}
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier class names\n- You can use `w-*` and `h-*` classes to set the width and height of the stack, making all items the same size\n\n### stat\nStat is used to show numbers and data in a block\n\n[stat docs](mdc:https:/daisyui.com/components/stat)\n\n#### Class names\n- Component: `stats`\n- Part: `stat`, `stat-title`, `stat-value`, `stat-desc`, `stat-figure`, `stat-actions`\n- Direction: `stats-horizontal`, `stats-vertical`\n\n#### Syntax\n```html\n\n  {CONTENT}
\n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the direction class names\n- It's horizontal by default but you can make it vertical with the `stats-vertical` class\n- Content includes `stat-title`, `stat-value`, `stat-desc` inside a `stat`\n\n### status\nStatus is a really small icon to visually show the current status of an element, like online, offline, error, etc\n\n[status docs](mdc:https:/daisyui.com/components/status)\n\n#### Class Names:\n- Component: `status`\n- Color: `status-neutral`, `status-primary`, `status-secondary`, `status-accent`, `status-info`, `status-success`, `status-warning`, `status-error`\n- Size: `status-xs`, `status-sm`, `status-md`, `status-lg`, `status-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the color/size class names\n- This component does not render anything visible\n\n### steps\nSteps can be used to show a list of steps in a process\n\n[steps docs](mdc:https:/daisyui.com/components/steps)\n\n#### Class Names:\n- Component: `steps`\n- Part: `step`, `step-icon`\n- Color: `step-neutral`, `step-primary`, `step-secondary`, `step-accent`, `step-info`, `step-success`, `step-warning`, `step-error`\n- Direction: `steps-vertical`, `steps-horizontal`\n\n#### Syntax\n```html\n\n  {step content}
\n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each direction/color class names\n- To make a step active, add the `step-primary` class\n- You can add an icon in each step using `step-icon` class\n- To display data in `data-content` ,use `data-content=\"{value}\"` at the ``\n\n### swap\nSwap allows you to toggle the visibility of two elements using a checkbox or a class name\n\n[swap docs](mdc:https:/daisyui.com/components/swap)\n\n#### Class Names:\n- Component: `swap`\n- Part: `swap-on`, `swap-off`, `swap-indeterminate`\n- Modifier: `swap-active`\n- Style: `swap-rotate`, `swap-flip`\n\n#### Syntax\nUsing checkbox\n```html\n\n  \n  {content when active}
\n  {content when inactive}
\n\n```\n\nUsing class name\n```html\n\n  {content when active}
\n  {content when inactive}
\n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/style class names\n- Use only a hidden checkbox to control swap state or add/remove the `swap-active` class using JS to control state\n- To show something when the checkbox is indeterminate, use `swap-indeterminate` class\n\n### tab\nTabs can be used to show a list of links in a tabbed format\n\n[tab docs](mdc:https:/daisyui.com/components/tab)\n\n#### Class Names:\n- Component: `tabs`\n- Part: `tab`, `tab-content`\n- Style: `tabs-box`, `tabs-border`, `tabs-lift`\n- Modifier: `tab-active`, `tab-disabled`\n- Placement: `tabs-top`, `tabs-bottom`\n\n#### Syntax\nUsing buttons:\n```html\n\n  \n
\n```\n\nUsing radio inputs:\n```html\n\n  \n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the style/size class names\n- Radio inputs are needed for tab content to work with tab click\n- If tabs gets a background then every tab inside it becomes rounded from both top corners\n\n### table\nTable can be used to show a list of data in a table format\n\n[table docs](mdc:https:/daisyui.com/components/table)\n\n#### Class Names:\n- Component: `table`\n- Modifier: `table-zebra`, `table-pin-rows`, `table-pin-cols`\n- Size: `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl`\n\n#### Syntax\n```html\n\n  \n    \n      \n        \n      \n    \n    \n      \n        \n      \n    \n  
\n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each modifier/size class names\n- The `overflow-x-auto` class is added to the wrapper div to make the table horizontally scrollable on smaller screens\n\n### textarea\nTextarea allows users to enter text in multiple lines\n\n[textarea docs](mdc:https:/daisyui.com/components/textarea)\n\n#### Class Names:\n- Component: `textarea`\n- Style: `textarea-ghost`\n- Color: `textarea-neutral`, `textarea-primary`, `textarea-secondary`, `textarea-accent`, `textarea-info`, `textarea-success`, `textarea-warning`, `textarea-error`\n- Size: `textarea-xs`, `textarea-sm`, `textarea-md`, `textarea-lg`, `textarea-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each style/color/size class names\n\n### theme-controller\nIf 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\n\n[theme-controller docs](mdc:https:/daisyui.com/components/theme-controller)\n\n#### Class names\n- component: `theme-controller`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- The value attribute of the input element should be a valid daisyUI theme name\n\n### timeline\nTimeline component shows a list of events in chronological order\n\n[timeline docs](mdc:https:/daisyui.com/components/timeline)\n\n#### Class Names:\n- Component: `timeline`\n- Part: `timeline-start`, `timeline-middle`, `timeline-end`\n- Modifier: `timeline-snap-icon`, `timeline-box`, `timeline-compact`\n- Direction: `timeline-vertical`, `timeline-horizontal`\n\n#### Syntax\n```html\n\n  \n    {start}
\n    {icon}
\n    {end}
\n  
\n
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the modifier/direction class names\n- To make a vertical timeline, add the `timeline-vertical` class to the `ul` element or just do nothing (because its the default style.)\n- Add `timeline-snap-icon` to snap the icon to the start instead of middle\n- Add the `timeline-compact` class to force all items on one side\n\n### toast\nToast is a wrapper to stack elements, positioned on the corner of page\n\n[toast docs](mdc:https:/daisyui.com/components/toast)\n\n#### Class Names:\n- Component: `toast`\n- Placement: `toast-start`, `toast-center`, `toast-end`, `toast-top`, `toast-middle`, `toast-bottom`\n\n#### Syntax\n```html\n{CONTENT}
\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of the placement class names\n\n### toggle\nToggle is a checkbox that is styled to look like a switch button\n\n[toggle docs](mdc:https:/daisyui.com/components/toggle)\n\n#### Class Names:\n- Component: `toggle`\n- Color: `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-neutral`, `toggle-success`, `toggle-warning`, `toggle-info`, `toggle-error`\n- Size: `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg`, `toggle-xl`\n\n#### Syntax\n```html\n\n```\n\n#### Rules\n- {MODIFIER} is optional and can have one of each color/size class names\n\n### validator\nValidator class changes the color of form elements to error or success based on input's validation rules\n\n[validator docs](mdc:https:/daisyui.com/components/validator)\n\n#### Class names\n- component: `validator`\n- part: `validator-hint`\n\n#### Syntax\n```html\n\nError message\n```\n\n#### Rules\n- Use with `input`, `select`, `textarea`\n","deleted","label",[167,168,151],".cursor","rules","permalink","https://www.val.town/x/arfan/summer-notes-v1/code/.cursor/rules/daisyui.mdc","extension","mdc","actionData","errors"]