diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index f27bc5dcac4..5f9bb1bc7e5 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -6,24 +6,38 @@ body:
     attributes:
       value: |
 
-        Thank you for submitting a bug report 💚  
+        Thank you for submitting a bug report 💚
         If you need help about your project and it's **NOT** a daisyUI bug, please [ask your question in discussion forum](https://github.com/saadeghi/daisyui/discussions/new?category=q-a).
 
         👉 Before you submit a new bug, please do the following steps:
 
-        1. Update your diasyUI (and other dependencies) to the latest version (`npm i -D daisyui@latest`)  
-        2. Read [FAQ](https://github.com/saadeghi/daisyui/discussions/1949). You may find a solution there  
-        3. Search [existing issues](https://github.com/saadeghi/daisyui/issues?q=is%3Aissue) and [discussion forum](https://github.com/saadeghi/daisyui/discussions?discussions_q=). You may find a solution there  
-        4. Make sure this bug is **NOT** specific to a JS framework or a build tool. If the issue doesn't happen on [Tailwind Play](https://daisyui.com/tailwindplay/) it means it's not an issue from daisyUI.  
-        It can be a config problem in your project ([ask here](https://github.com/saadeghi/daisyui/discussions?discussions_q=)) or it can be an issue from your framework or CSS build tools.  
+        1. Update your diasyUI (and other dependencies) to the latest version (`npm i -D daisyui@latest`)
+        2. Read [FAQ](https://github.com/saadeghi/daisyui/discussions/1949). You may find a solution there
+        3. Search [existing issues](https://github.com/saadeghi/daisyui/issues?q=is%3Aissue) and [discussion forum](https://github.com/saadeghi/daisyui/discussions?discussions_q=). You may find a solution there
+        4. Make sure this bug is **NOT** specific to a JS framework or a build tool. If the issue doesn't happen on [Tailwind Play](https://daisyui.com/tailwindplay/) it means it's not an issue from daisyUI.
+        It can be a config problem in your project ([ask here](https://github.com/saadeghi/daisyui/discussions?discussions_q=)) or it can be an issue from your framework or CSS build tools.
         5. Open one issue per problem. Don't list multiple issues in the same page because that would be hard to track.
 
+  - type: input
+    id: reproduction
+    attributes:
+      label: Reproduction URL (Required)
+      description: |
+
+        ℹ️ Please provide a link to a small, minimal example source code where issue can be reproduced. Without a link it will be hard to guess what is the cause of the problem and it will take more time to fix.
+
+        ℹ️ You can use a [Tailwind Play](https://daisyui.com/tailwindplay/) page or a [Stackblitz page](https://stackblitz.com/@saadeghi/collections/daisyui) or a public GitHub repo.
+
+      placeholder: "https://"
+    validations:
+      required: true
+
   - type: input
     id: version
     attributes:
       label: What version of daisyUI are you using?
       description: You can see the daisyUI version number on your `package.json` file.
-      placeholder: "example: v4.0.3"
+      placeholder: "example: v5.0.0"
     validations:
       required: false
 
@@ -42,20 +56,6 @@ body:
         - Edge
         - Other
 
-  - type: input
-    id: reproduction
-    attributes:
-      label: Reproduction URL
-      description: |
-
-        ℹ️ Please provide a link to a small, minimal example source code where issue can be reproduced. Without a link it will be hard to guess what is the cause of the problem and it will take more time to fix.
-
-        ℹ️ You can use a [Tailwind Play](https://daisyui.com/tailwindplay/) page or a [Stackblitz page](https://stackblitz.com/@saadeghi/collections/daisyui) or a public GitHub repo.
-
-      placeholder: "https://"
-    validations:
-      required: true
-
   - type: textarea
     id: description
     attributes:
diff --git a/packages/docs/src/components/homepage/Opensource.svelte b/packages/docs/src/components/homepage/Opensource.svelte
index f2f3ef33f9f..ac038ec9b8a 100644
--- a/packages/docs/src/components/homepage/Opensource.svelte
+++ b/packages/docs/src/components/homepage/Opensource.svelte
@@ -52,7 +52,9 @@
       </a>
     </p>
     <div class="flex w-full justify-center">
-      <div class="flex w-full max-w-7xl flex-wrap justify-center p-10">
+      <div
+        class="flex w-full max-w-7xl flex-wrap justify-center p-10 max-sm:[&>*:nth-child(n+50)]:hidden"
+      >
         {#each contributors as contributor, index}
           <div class="avatar tooltip p-2" data-tip={contributor}>
             <div
@@ -78,7 +80,9 @@
       </a>
     </p>
     <div class="flex w-full justify-center">
-      <div class="flex w-full max-w-7xl flex-wrap justify-center p-10">
+      <div
+        class="flex w-full max-w-7xl flex-wrap justify-center p-10 max-sm:[&>*:nth-child(n+50)]:hidden"
+      >
         {#each sponsors as sponsor, index}
           <div class="tooltip" data-tip={sponsor.name}>
             {#if sponsor.image}
diff --git a/packages/docs/src/routes/(routes)/+page.server.js b/packages/docs/src/routes/(routes)/+page.server.js
index 987b0941e95..55afec6723a 100644
--- a/packages/docs/src/routes/(routes)/+page.server.js
+++ b/packages/docs/src/routes/(routes)/+page.server.js
@@ -1,7 +1,7 @@
 import { stats } from "$lib/data/stats.js"
 
 export async function load({ params }) {
-  const response = await fetch("https://img.daisyui.com/data/testimonials.json")
+  const response = await fetch("https://img.daisyui.com/generated/testimonials.json")
   const testimonials = await response.json()
   return {
     testimonials,
diff --git a/packages/docs/src/routes/(routes)/+page.svelte b/packages/docs/src/routes/(routes)/+page.svelte
index 76b43451b21..95d60299e8c 100644
--- a/packages/docs/src/routes/(routes)/+page.svelte
+++ b/packages/docs/src/routes/(routes)/+page.svelte
@@ -134,6 +134,20 @@
   //   count(data)
   //   daisyui5progress = ((trueCount / totalCount) * 100).toFixed(0)
   // })
+
+  function highlight(node) {
+    const content = node.textContent
+    node.innerHTML = content.replace(
+      /\*(.*?)\*/g,
+      "<mark class='-rotate-1 mx-1 scale-105 inline-block bg-[oklch(91.86%_0.2209_102.42)]/35 rounded-[1px] outline-2 outline-[oklch(91.86%_0.2209_102.42)]/35'>$1</mark>",
+    )
+
+    return {
+      destroy() {
+        node.innerHTML = content
+      },
+    }
+  }
 </script>
 
 <svelte:window bind:scrollY bind:innerHeight />
@@ -1613,7 +1627,7 @@
       >
         <div></div>
 
-        {#each ["vue", "react", "svelte", "qwik", "laravel", "nextjs", "solidjs", "preact", "phoenix", "nuxtjs", "astro", "angular", "vite", "laravel"] as logo, index}
+        {#each ["vue", "react", "svelte", "qwik", "laravel", "nextjs", "solidjs", "preact", "phoenix", "nuxtjs", "astro", "angular", "vite", "rails"] as logo, index}
           <img
             loading="lazy"
             width="96"
@@ -2025,12 +2039,18 @@
 <div>
   <div class="h-32"></div>
   <div
-    class="mx-auto grid max-w-5xl grid-cols-1 gap-6 px-10 md:grid-cols-2 lg:grid-cols-3 lg:[&>*:nth-child(3n-1)]:translate-y-16"
+    class="mx-auto max-w-7xl gap-8 px-10 md:columns-2 lg:columns-3 xl:columns-3 max-sm:[&>*:nth-child(n+9)]:hidden"
   >
-    {#each data.testimonials as testimonial, index}
-      <div class="card border-base-content/5 card-sm border text-start">
-        <div class="card-body">
-          <div class="flex items-center gap-2">
+    {#each data.testimonials.testimonials as testimonial, index}
+      <div class="card card-sm bg-base-200 mb-8 break-inside-avoid rounded-ee-[2.5rem] text-start">
+        <div class="card-body gap-5">
+          <p
+            class="text-base-content/70 px-1 text-[0.75rem] leading-[1.75] [text-wrap:balance]"
+            use:highlight
+          >
+            {testimonial.content}
+          </p>
+          <div class="flex flex-row-reverse items-center gap-3">
             <div class="avatar">
               <a
                 href={`https://twitter.com/${testimonial.username}/status/${testimonial.id}`}
@@ -2040,17 +2060,17 @@
               >
                 <div
                   class="size-12 rounded-full"
-                  style="background-image: url('https://img.daisyui.com/generated/x.webp'); background-size:auto 48px;background-position: -{index *
-                    48}px 0px;"
+                  style={`background-image: url('https://img.daisyui.com/generated/x.webp?${data.testimonials.generated_at}'); background-size:auto 48px;background-position: -${
+                    index * 48
+                  }px 0px;`}
                 ></div>
               </a>
             </div>
-            <div class="flex flex-col items-start text-xs">
+            <div class="flex flex-col items-end text-xs">
               <div class="text-base-content font-bold">{testimonial.name}</div>
               <div class="text-base-content/70">{testimonial.bio}</div>
             </div>
           </div>
-          <p class="text-base-content/70">{testimonial.content}</p>
         </div>
       </div>
     {/each}
diff --git a/packages/docs/static/llms.txt b/packages/docs/static/llms.txt
index e39d712f928..504a01217a6 100644
--- a/packages/docs/static/llms.txt
+++ b/packages/docs/static/llms.txt
@@ -26,7 +26,7 @@ daisyUI 5 provides class names for common UI components
 3. 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
 4. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility
 5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
-6. Do not invent new class names. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
+6. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
 7. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred.
 8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
 9. suggested - when designing , don't add a custom font unless it's necessary
@@ -45,17 +45,17 @@ daisyUI 5 class names are one of the following categories. these type names are
 
 ## Config
 daisyUI 5 config docs: https://daisyui.com/docs/config/
-daisyUI without config looks like this:
+daisyUI without config:
 ```css
 @plugin "daisyui";
 ```
-daisyUI config with `light` theme only (no dark theme) looks like this:
+daisyUI config with `light` theme only:
 ```css
 @plugin "daisyui" {
   themes: light --default;
 }
 ```
-daisyUI with all the default configs looks like this:
+daisyUI with all the default configs:
 ```css
 @plugin "daisyui" {
   themes: light --default, dark --prefersdark;
@@ -171,17 +171,10 @@ Accordion is used for showing and hiding content but only one item can stay open
 [accordion docs](https://daisyui.com/components/accordion/)
 
 #### Class names
-- component
-  - `collapse`
-- part
-  - `collapse-title`
-  - `collapse-content`
-- modifier
-  - `collapse-arrow`
-  - `collapse-plus`
-  - `collapse-open`
-  - `collapse-close`
-  
+- component: `collapse`
+- part: `collapse-title`, `collapse-content`
+- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
+
 #### Syntax
 ```html
 <div class="collapse {MODIFIER}">{CONTENT}</div>
@@ -206,21 +199,11 @@ Alert informs users about important events
 [alert docs](https://daisyui.com/components/alert/)
 
 #### Class names
-- component
-  - `alert`
-- style
-  - `alert-outline`
-  - `alert-dash`
-  - `alert-soft`
-- color
-  - `alert-info`
-  - `alert-success`
-  - `alert-warning`
-  - `alert-error`
-- direction
-  - `alert-vertical`
-  - `alert-horizontal`
-  
+- component: `alert`
+- style: `alert-outline`, `alert-dash`, `alert-soft`
+- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error`
+- direction: `alert-vertical`, `alert-horizontal`
+
 #### Syntax
 ```html
 <div role="alert" class="alert {MODIFIER}">{CONTENT}</div>
@@ -231,19 +214,14 @@ Alert informs users about important events
 - Add `sm:alert-horizontal` for responsive layouts
 
 ### avatar
-Avatars are used to show a thumbnail representation of an individual or business in the interface
+Avatars are used to show a thumbnail
 
 [avatar docs](https://daisyui.com/components/avatar/)
 
 #### Class names
-- component
-  - `avatar`
-  - `avatar-group`
-- modifier
-  - `avatar-online`
-  - `avatar-offline`
-  - `avatar-placeholder`
-  
+- component: `avatar`, `avatar-group`
+- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder`
+
 #### Syntax
 ```html
 <div class="avatar {MODIFIER}">
@@ -265,29 +243,11 @@ Badges are used to inform the user of the status of specific data
 [badge docs](https://daisyui.com/components/badge/)
 
 #### Class names
-- component
-  - `badge`
-- style
-  - `badge-outline`
-  - `badge-dash`
-  - `badge-soft`
-  - `badge-ghost`
-- color
-  - `badge-neutral`
-  - `badge-primary`
-  - `badge-secondary`
-  - `badge-accent`
-  - `badge-info`
-  - `badge-success`
-  - `badge-warning`
-  - `badge-error`
-- size
-  - `badge-xs`
-  - `badge-sm`
-  - `badge-md`
-  - `badge-lg`
-  - `badge-xl`
-  
+- component: `badge`
+- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost`
+- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error`
+- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl`
+
 #### Syntax
 ```html
 <span class="badge {MODIFIER}">Badge</span>
@@ -299,20 +259,17 @@ Badges are used to inform the user of the status of specific data
 - To create an empty badge, just remove the text between the span tags
 
 ### breadcrumbs
-Breadcrumbs helps users to navigate through the website
+Breadcrumbs helps users to navigate
 
 [breadcrumbs docs](https://daisyui.com/components/breadcrumbs/)
 
 #### Class names
-- component
-  - `breadcrumbs`
-  
+- component: `breadcrumbs`
+
 #### Syntax
 ```html
 <div class="breadcrumbs">
-  <ul>
-    <li><a>Link</a></li>
-  </ul>
+  <ul><li><a>Link</a></li></ul>
 </div>
 ```
 
@@ -322,43 +279,18 @@ Breadcrumbs helps users to navigate through the website
 - If you set `max-width` or the list gets larger than the container it will scroll
 
 ### button
-Buttons allow the user to take actions or make choices
+Buttons allow the user to take actions
 
 [button docs](https://daisyui.com/components/button/)
 
 #### Class names
-- component
-  - `btn`
-- color
-  - `btn-neutral`
-  - `btn-primary`
-  - `btn-secondary`
-  - `btn-accent`
-  - `btn-info`
-  - `btn-success`
-  - `btn-warning`
-  - `btn-error`
-- style
-  - `btn-outline`
-  - `btn-dash`
-  - `btn-soft`
-  - `btn-ghost`
-  - `btn-link`
-- behavior
-  - `btn-active`
-  - `btn-disabled`
-- size
-  - `btn-xs`
-  - `btn-sm`
-  - `btn-md`
-  - `btn-lg`
-  - `btn-xl`
-- modifier
-  - `btn-wide`
-  - `btn-block`
-  - `btn-square`
-  - `btn-circle`
-  
+- component: `btn`
+- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`
+- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link`
+- behavior: `btn-active`, `btn-disabled`
+- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`
+- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle`
+
 #### Syntax
 ```html
 <button class="btn {MODIFIER}">Button</button>
@@ -398,30 +330,17 @@ For React Day Picker:
 - daisyUI supports Cally, Pikaday, React Day Picker
 
 ### card
-Cards are used to group and display content in a way that is easily readable
+Cards are used to group and display content
 
 [card docs](https://daisyui.com/components/card/)
 
 #### Class names
-- component
-  - `card`
-- part
-  - `card-title`
-  - `card-body`
-  - `card-actions`
-- style
-  - `card-border`
-  - `card-dash`
-- modifier
-  - `card-side`
-  - `image-full`
-- size
-  - `card-xs`
-  - `card-sm`
-  - `card-md`
-  - `card-lg`
-  - `card-xl`
-  
+- component: `card`
+- part: `card-title`, `card-body`, `card-actions`
+- style: `card-border`, `card-dash`
+- modifier: `card-side`, `image-full`
+- size: `card-xs`, `card-sm`, `card-md`, `card-lg`, `card-xl`
+
 #### Syntax
 ```html
 <div class="card {MODIFIER}">
@@ -446,18 +365,11 @@ Carousel show images or content in a scrollable area
 [carousel docs](https://daisyui.com/components/carousel/)
 
 #### Class names
-- component
-  - `carousel`
-- part
-  - `carousel-item`
-- modifier
-  - `carousel-start`
-  - `carousel-center`
-  - `carousel-end`
-- direction
-  - `carousel-horizontal`
-  - `carousel-vertical`
-  
+- component: `carousel`
+- part: `carousel-item`
+- modifier: `carousel-start`, `carousel-center`, `carousel-end`
+- direction: `carousel-horizontal`, `carousel-vertical`
+
 #### Syntax
 ```html
 <div class="carousel {MODIFIER}">{CONTENT}</div>
@@ -474,26 +386,11 @@ Chat bubbles are used to show one line of conversation and all its data, includi
 [chat docs](https://daisyui.com/components/chat/)
 
 #### Class names
-- component
-  - `chat`
-- part
-  - `chat-image`
-  - `chat-header`
-  - `chat-footer`
-  - `chat-bubble`
-- placement
-  - `chat-start`
-  - `chat-end`
-- 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`
-  
+- component: `chat`
+- part: `chat-image`, `chat-header`, `chat-footer`, `chat-bubble`
+- placement: `chat-start`, `chat-end`
+- 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`
+
 #### Syntax
 ```html
 <div class="chat {PLACEMENT}">
@@ -515,24 +412,10 @@ Checkboxes are used to select or deselect a value
 [checkbox docs](https://daisyui.com/components/checkbox/)
 
 #### Class names
-- component
-  - `checkbox`
-- color
-  - `checkbox-primary`
-  - `checkbox-secondary`
-  - `checkbox-accent`
-  - `checkbox-neutral`
-  - `checkbox-success`
-  - `checkbox-warning`
-  - `checkbox-info`
-  - `checkbox-error`
-- size
-  - `checkbox-xs`
-  - `checkbox-sm`
-  - `checkbox-md`
-  - `checkbox-lg`
-  - `checkbox-xl`
-  
+- component: `checkbox`
+- color: `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-neutral`, `checkbox-success`, `checkbox-warning`, `checkbox-info`, `checkbox-error`
+- size: `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg`, `checkbox-xl`
+
 #### Syntax
 ```html
 <input type="checkbox" class="checkbox {MODIFIER}" />
@@ -547,17 +430,10 @@ Collapse is used for showing and hiding content
 [collapse docs](https://daisyui.com/components/collapse/)
 
 #### Class names
-- component
-  - `collapse`
-- part
-  - `collapse-title`
-  - `collapse-content`
-- modifier
-  - `collapse-arrow`
-  - `collapse-plus`
-  - `collapse-open`
-  - `collapse-close`
-  
+- component: `collapse`
+- part: `collapse-title`, `collapse-content`
+- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
+
 #### Syntax
 ```html
 <div tabindex="0" class="collapse {MODIFIER}">
@@ -577,9 +453,8 @@ Countdown gives you a transition effect when you change a number between 0 to 99
 [countdown docs](https://daisyui.com/components/countdown/)
 
 #### Class names
-- component
-  - `countdown`
-  
+- component: `countdown`
+
 #### Syntax
 ```html
 <span class="countdown">
@@ -598,13 +473,9 @@ Diff component shows a side-by-side comparison of two items
 [diff docs](https://daisyui.com/components/diff/)
 
 #### Class names
-- component
-  - `diff`
-- part
-  - `diff-item-1`
-  - `diff-item-2`
-  - `diff-resizer`
-  
+- component: `diff`
+- part: `diff-item-1`, `diff-item-2`, `diff-resizer`
+
 #### Syntax
 ```html
 <figure class="diff">
@@ -623,24 +494,11 @@ Divider will be used to separate content vertically or horizontally
 [divider docs](https://daisyui.com/components/divider/)
 
 #### Class names
-- component
-  - `divider`
-- color
-  - `divider-neutral`
-  - `divider-primary`
-  - `divider-secondary`
-  - `divider-accent`
-  - `divider-success`
-  - `divider-warning`
-  - `divider-info`
-  - `divider-error`
-- direction
-  - `divider-vertical`
-  - `divider-horizontal`
-- placement
-  - `divider-start`
-  - `divider-end`
-  
+- component: `divider`
+- color: `divider-neutral`, `divider-primary`, `divider-secondary`, `divider-accent`, `divider-success`, `divider-warning`, `divider-info`, `divider-error`
+- direction: `divider-vertical`, `divider-horizontal`
+- placement: `divider-start`, `divider-end`
+
 #### Syntax
 ```html
 <div class="divider {MODIFIER}">{text}</div>
@@ -656,19 +514,11 @@ Dock (also know as Bottom navigation or Bottom bar) is a UI element that provide
 [dock docs](https://daisyui.com/components/dock/)
 
 #### Class names
-- component
-  - `dock`
-- part
-  - `dock-label`
-- modifier
-  - `dock-active`
-- size
-  - `dock-xs`
-  - `dock-sm`
-  - `dock-md`
-  - `dock-lg`
-  - `dock-xl`
-  
+- component: `dock`
+- part: `dock-label`
+- modifier: `dock-active`
+- size: `dock-xs`, `dock-sm`, `dock-md`, `dock-lg`, `dock-xl`
+
 #### Syntax
 ```html
 <div class="dock {MODIFIER}">{CONTENT}</div>
@@ -692,18 +542,11 @@ Drawer is a grid layout that can show/hide a sidebar on the left or right side o
 [drawer docs](https://daisyui.com/components/drawer/)
 
 #### Class names
-- component
-  - `drawer`
-- part
-  - `drawer-toggle`
-  - `drawer-content`
-  - `drawer-side`
-  - `drawer-overlay`
-- placement
-  - `drawer-end`
-- modifier
-  - `drawer-open`
-  
+- component: `drawer`
+- part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay`
+- placement: `drawer-end`
+- modifier: `drawer-open`
+
 #### Syntax
 ```html
 <div class="drawer {MODIFIER}">
@@ -735,22 +578,11 @@ Dropdown can open a menu or any other element when the button is clicked
 [dropdown docs](https://daisyui.com/components/dropdown/)
 
 #### Class names
-- component
-  - `dropdown`
-- part
-  - `dropdown-content`
-- placement
-  - `dropdown-start`
-  - `dropdown-center`
-  - `dropdown-end`
-  - `dropdown-top`
-  - `dropdown-bottom`
-  - `dropdown-left`
-  - `dropdown-right`
-- modifier
-  - `dropdown-hover`
-  - `dropdown-open`
-  
+- component: `dropdown`
+- part: `dropdown-content`
+- placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right`
+- modifier: `dropdown-hover`, `dropdown-open`
+
 #### Syntax
 Using details and summary
 ```html
@@ -786,11 +618,8 @@ Fieldset is a container for grouping related form elements. It includes fieldset
 [fieldset docs](https://daisyui.com/components/fieldset/)
 
 #### Class names
-- component
-  - `fieldset`
-- part
-  - `fieldset-legend`
-  - `fieldset-label`
+- Component: `fieldset`
+- Parts: `fieldset-legend`, `fieldset-label`
   
 #### Syntax
 ```html
@@ -809,27 +638,12 @@ File Input is a an input field for uploading files
 
 [file-input docs](https://daisyui.com/components/file-input/)
 
-#### Class names
-- component
-  - `file-input`
-- style
-  - `file-input-ghost`
-- 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`
-- size
-  - `file-input-xs`
-  - `file-input-sm`
-  - `file-input-md`
-  - `file-input-lg`
-  - `file-input-xl`
-  
+#### Class Names:
+- Component: `file-input`
+- Style: `file-input-ghost`
+- 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`
+- Size: `file-input-xs`, `file-input-sm`, `file-input-md`, `file-input-lg`, `file-input-xl`
+
 #### Syntax
 ```html
 <input type="file" class="file-input {MODIFIER}" />
@@ -844,11 +658,9 @@ Filter is a group of radio buttons. Choosing one of the options will hide the ot
 [filter docs](https://daisyui.com/components/filter/)
 
 #### Class names
-- component
-  - `filter`
-- part
-  - `filter-reset`
-  
+- component: `filter`
+- part: `filter-reset`
+
 #### Syntax
 Using HTML form
 ```html
@@ -877,16 +689,11 @@ Footer can contain logo, copyright notice, and links to other pages
 [footer docs](https://daisyui.com/components/footer/)
 
 #### Class names
-- component
-  - `footer`
-- part
-  - `footer-title`
-- placement
-  - `footer-center`
-- direction
-  - `footer-horizontal`
-  - `footer-vertical`
-  
+- component: `footer`
+- part: `footer-title`
+- placement: `footer-center`
+- direction: `footer-horizontal`, `footer-vertical`
+
 #### Syntax
 ```html
 <footer class="footer {MODIFIER}">{CONTENT}</footer>
@@ -904,12 +711,9 @@ Hero is a component for displaying a large box or image with a title and descrip
 [hero docs](https://daisyui.com/components/hero/)
 
 #### Class names
-- component
-  - `hero`
-- part
-  - `hero-content`
-  - `hero-overlay`
-  
+- component: `hero`
+- part: `hero-content`, `hero-overlay`
+
 #### Syntax
 ```html
 <div class="hero {MODIFIER}">{CONTENT}</div>
@@ -927,18 +731,10 @@ Indicators are used to place an element on the corner of another element
 [indicator docs](https://daisyui.com/components/indicator/)
 
 #### Class names
-- component
-  - `indicator`
-- part
-  - `indicator-item`
-- placement
-  - `indicator-start`
-  - `indicator-center`
-  - `indicator-end`
-  - `indicator-top`
-  - `indicator-middle`
-  - `indicator-bottom`
-  
+- component: `indicator`
+- part: `indicator-item`
+- placement: `indicator-start`, `indicator-center`, `indicator-end`, `indicator-top`, `indicator-middle`, `indicator-bottom`
+
 #### Syntax
 ```html
 <div class="indicator">
@@ -957,26 +753,11 @@ Text Input is a simple input field
 [input docs](https://daisyui.com/components/input/)
 
 #### Class names
-- component
-  - `input`
-- style
-  - `input-ghost`
-- color
-  - `input-neutral`
-  - `input-primary`
-  - `input-secondary`
-  - `input-accent`
-  - `input-info`
-  - `input-success`
-  - `input-warning`
-  - `input-error`
-- size
-  - `input-xs`
-  - `input-sm`
-  - `input-md`
-  - `input-lg`
-  - `input-xl`
-  
+- component: `input`
+- style: `input-ghost`
+- color: `input-neutral`, `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error`
+- size: `input-xs`, `input-sm`, `input-md`, `input-lg`, `input-xl`
+
 #### Syntax
 ```html
 <input type="{type}" placeholder="Type here" class="input {MODIFIER}" />
@@ -993,13 +774,9 @@ Join is a container for grouping multiple items, it can be used to group buttons
 [join docs](https://daisyui.com/components/join/)
 
 #### Class names
-- component
-  - `join`
-  - `join-item`
-- direction
-  - `join-vertical`
-  - `join-horizontal`
-  
+- component: `join`, `join-item`
+- direction: `join-vertical`, `join-horizontal`
+
 #### Syntax
 ```html
 <div class="join {MODIFIER}">{CONTENT}</div>
@@ -1017,15 +794,9 @@ Kbd is used to display keyboard shortcuts
 [kbd docs](https://daisyui.com/components/kbd/)
 
 #### Class names
-- component
-  - `kbd`
-- size
-  - `kbd-xs`
-  - `kbd-sm`
-  - `kbd-md`
-  - `kbd-lg`
-  - `kbd-xl`
-  
+- component: `kbd`
+- size: `kbd-xs`, `kbd-sm`, `kbd-md`, `kbd-lg`, `kbd-xl`
+
 #### Syntax
 ```html
 <kbd class="kbd {MODIFIER}">K</kbd>
@@ -1040,10 +811,8 @@ Label is used to provide a name or title for an input field. Label can be placed
 [label docs](https://daisyui.com/components/label/)
 
 #### Class names
-- component
-  - `label`
-  - `floating-label`
-  
+- component: `label`, `floating-label`
+
 #### Syntax
 For regular label:
 ```html
@@ -1070,20 +839,10 @@ Link adds the missing underline style to links
 [link docs](https://daisyui.com/components/link/)
 
 #### Class names
-- component
-  - `link`
-- style
-  - `link-hover`
-- color
-  - `link-neutral`
-  - `link-primary`
-  - `link-secondary`
-  - `link-accent`
-  - `link-success`
-  - `link-info`
-  - `link-warning`
-  - `link-error`
-  
+- component: `link`
+- style: `link-hover`
+- color: `link-neutral`, `link-primary`, `link-secondary`, `link-accent`, `link-success`, `link-info`, `link-warning`, `link-error`
+
 #### Syntax
 ```html
 <a class="link {MODIFIER}">Click me</a>
@@ -1097,13 +856,9 @@ List is a vertical layout to display information in rows
 
 [list docs](https://daisyui.com/components/list/)
 
-#### Class names
-- component
-  - `list`
-  - `list-row`
-- modifier
-  - `list-col-wrap`
-  - `list-col-grow`
+#### Class Names:
+- Component: `list`, `list-row`
+- Modifier: `list-col-wrap`, `list-col-grow`
   
 #### Syntax
 ```html
@@ -1123,22 +878,10 @@ Loading shows an animation to indicate that something is loading
 [loading docs](https://daisyui.com/components/loading/)
 
 #### Class names
-- component
-  - `loading`
-- style
-  - `loading-spinner`
-  - `loading-dots`
-  - `loading-ring`
-  - `loading-ball`
-  - `loading-bars`
-  - `loading-infinity`
-- size
-  - `loading-xs`
-  - `loading-sm`
-  - `loading-md`
-  - `loading-lg`
-  - `loading-xl`
-  
+- component: `loading`
+- style: `loading-spinner`, `loading-dots`, `loading-ring`, `loading-ball`, `loading-bars`, `loading-infinity`
+- size: `loading-xs`, `loading-sm`, `loading-md`, `loading-lg`, `loading-xl`
+
 #### Syntax
 ```html
 <span class="loading {MODIFIER}"></span>
@@ -1153,28 +896,10 @@ Mask crops the content of the element to common shapes
 [mask docs](https://daisyui.com/components/mask/)
 
 #### Class names
-- component
-  - `mask`
-- 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`
-- modifier
-  - `mask-half-1`
-  - `mask-half-2`
-  
+- component: `mask`
+- 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`
+- modifier: `mask-half-1`, `mask-half-2`
+
 #### Syntax
 ```html
 <img class="mask {MODIFIER}" src="{image-url}" />
@@ -1191,27 +916,12 @@ Menu is used to display a list of links vertically or horizontally
 [menu docs](https://daisyui.com/components/menu/)
 
 #### Class names
-- component
-  - `menu`
-- part
-  - `menu-title`
-  - `menu-dropdown`
-  - `menu-dropdown-toggle`
-- modifier
-  - `menu-disabled`
-  - `menu-active`
-  - `menu-focus`
-  - `menu-dropdown-show`
-- size
-  - `menu-xs`
-  - `menu-sm`
-  - `menu-md`
-  - `menu-lg`
-  - `menu-xl`
-- direction
-  - `menu-vertical`
-  - `menu-horizontal`
-  
+- component: `menu`
+- part: `menu-title`, `menu-dropdown`, `menu-dropdown-toggle`
+- modifier: `menu-disabled`, `menu-active`, `menu-focus`, `menu-dropdown-show`
+- size: `menu-xs`, `menu-sm`, `menu-md`, `menu-lg`, `menu-xl`
+- direction: `menu-vertical`, `menu-horizontal`
+
 #### Syntax
 Vertical menu:
 ```html
@@ -1239,11 +949,9 @@ Browser mockup shows a box that looks like a browser window
 [mockup-browser docs](https://daisyui.com/components/mockup-browser/)
 
 #### Class names
-- component
-  - `mockup-browser`
-- part
-  - `mockup-browser-toolbar`
-  
+- component: `mockup-browser`
+- part: `mockup-browser-toolbar`
+
 #### Syntax
 ```html
 <div class="mockup-browser">
@@ -1264,9 +972,8 @@ Code mockup is used to show a block of code in a box that looks like a code edit
 [mockup-code docs](https://daisyui.com/components/mockup-code/)
 
 #### Class names
-- component
-  - `mockup-code`
-  
+- component: `mockup-code`
+
 #### Syntax
 ```html
 <div class="mockup-code">
@@ -1285,12 +992,9 @@ Phone mockup shows a mockup of an iPhone
 [mockup-phone docs](https://daisyui.com/components/mockup-phone/)
 
 #### Class names
-- component
-  - `mockup-phone`
-- part
-  - `mockup-phone-camera`
-  - `mockup-phone-display`
-  
+- component: `mockup-phone`
+- part: `mockup-phone-camera`, `mockup-phone-display`
+
 #### Syntax
 ```html
 <div class="mockup-phone">
@@ -1308,9 +1012,8 @@ Window mockup shows a box that looks like an operating system window
 [mockup-window docs](https://daisyui.com/components/mockup-window/)
 
 #### Class names
-- component
-  - `mockup-window`
-  
+- component: `mockup-window`
+
 #### Syntax
 ```html
 <div class="mockup-window">
@@ -1324,22 +1027,11 @@ Modal is used to show a dialog or a box when you click a button
 [modal docs](https://daisyui.com/components/modal/)
 
 #### Class names
-- component
-  - `modal`
-- part
-  - `modal-box`
-  - `modal-action`
-  - `modal-backdrop`
-  - `modal-toggle`
-- modifier
-  - `modal-open`
-- placement
-  - `modal-top`
-  - `modal-middle`
-  - `modal-bottom`
-  - `modal-start`
-  - `modal-end`
-  
+- component: `modal`
+- part: `modal-box`, `modal-action`, `modal-backdrop`, `modal-toggle`
+- modifier: `modal-open`
+- placement: `modal-top`, `modal-middle`, `modal-bottom`, `modal-start`, `modal-end`
+
 #### Syntax
 Using HTML dialog element
 ```html
@@ -1380,13 +1072,9 @@ Navbar is used to show a navigation bar on the top of the page
 [navbar docs](https://daisyui.com/components/navbar/)
 
 #### Class names
-- component
-  - `navbar`
-- part
-  - `navbar-start`
-  - `navbar-center`
-  - `navbar-end`
-  
+- component: `navbar`
+- part: `navbar-start`, `navbar-center`, `navbar-end`
+
 #### Syntax
 ```html
 <div class="navbar">{CONTENT}</div>
@@ -1398,19 +1086,15 @@ Navbar is used to show a navigation bar on the top of the page
 - suggestion - use `base-200` for background color
 
 ### pagination
-Pagination is a group of buttons that allow the user to navigate between a set of related content
+Pagination is a group of buttons
 
 [pagination docs](https://daisyui.com/components/pagination/)
 
 #### Class names
-- component
-  - `join`
-- part
-  - `join-item`
-- direction
-  - `join-vertical`
-  - `join-horizontal`
-  
+- component: `join`
+- part: `join-item`
+- direction: `join-vertical`, `join-horizontal`
+
 #### Syntax
 ```html
 <div class="join">{CONTENT}</div>
@@ -1426,18 +1110,9 @@ Progress bar can be used to show the progress of a task or to show the passing o
 [progress docs](https://daisyui.com/components/progress/)
 
 #### Class names
-- component
-  - `progress`
-- color
-  - `progress-neutral`
-  - `progress-primary`
-  - `progress-secondary`
-  - `progress-accent`
-  - `progress-info`
-  - `progress-success`
-  - `progress-warning`
-  - `progress-error`
-  
+- component: `progress`
+- color: `progress-neutral`, `progress-primary`, `progress-secondary`, `progress-accent`, `progress-info`, `progress-success`, `progress-warning`, `progress-error`
+
 #### Syntax
 ```html
 <progress class="progress {MODIFIER}" value="50" max="100"></progress>
@@ -1453,9 +1128,8 @@ Radial progress can be used to show the progress of a task or to show the passin
 [radial-progress docs](https://daisyui.com/components/radial-progress/)
 
 #### Class names
-- component
-  - `radial-progress`
-  
+- component: `radial-progress`
+
 #### Syntax
 ```html
 <div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>
@@ -1468,29 +1142,15 @@ Radial progress can be used to show the progress of a task or to show the passin
 - Use `--size` for setting size (default 5rem) and `--thickness` to set how thick the indicator is
 
 ### radio
-Radio buttons allow the user to select one option from a set
+Radio buttons allow the user to select one option
 
 [radio docs](https://daisyui.com/components/radio/)
 
 #### Class names
-- component
-  - `radio`
-- color
-  - `radio-neutral`
-  - `radio-primary`
-  - `radio-secondary`
-  - `radio-accent`
-  - `radio-success`
-  - `radio-warning`
-  - `radio-info`
-  - `radio-error`
-- size
-  - `radio-xs`
-  - `radio-sm`
-  - `radio-md`
-  - `radio-lg`
-  - `radio-xl`
-  
+- component: `radio`
+- color: `radio-neutral`, `radio-primary`, `radio-secondary`, `radio-accent`, `radio-success`, `radio-warning`, `radio-info`, `radio-error`
+- size: `radio-xs`, `radio-sm`, `radio-md`, `radio-lg`, `radio-xl`
+
 #### Syntax
 ```html
 <input type="radio" name="{name}" class="radio {MODIFIER}" />
@@ -1507,24 +1167,10 @@ Range slider is used to select a value by sliding a handle
 [range docs](https://daisyui.com/components/range/)
 
 #### Class names
-- component
-  - `range`
-- color
-  - `range-neutral`
-  - `range-primary`
-  - `range-secondary`
-  - `range-accent`
-  - `range-success`
-  - `range-warning`
-  - `range-info`
-  - `range-error`
-- size
-  - `range-xs`
-  - `range-sm`
-  - `range-md`
-  - `range-lg`
-  - `range-xl`
-  
+- component: `range`
+- color: `range-neutral`, `range-primary`, `range-secondary`, `range-accent`, `range-success`, `range-warning`, `range-info`, `range-error`
+- size: `range-xs`, `range-sm`, `range-md`, `range-lg`, `range-xl`
+
 #### Syntax
 ```html
 <input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />
@@ -1540,18 +1186,10 @@ Rating is a set of radio buttons that allow the user to rate something
 [rating docs](https://daisyui.com/components/rating/)
 
 #### Class names
-- component
-  - `rating`
-- modifier
-  - `rating-half`
-  - `rating-hidden`
-- size
-  - `rating-xs`
-  - `rating-sm`
-  - `rating-md`
-  - `rating-lg`
-  - `rating-xl`
-  
+- component: `rating`
+- modifier: `rating-half`, `rating-hidden`
+- size: `rating-xs`, `rating-sm`, `rating-md`, `rating-lg`, `rating-xl`
+
 #### Syntax
 ```html
 <div class="rating {MODIFIER}">
@@ -1570,26 +1208,11 @@ Select is used to pick a value from a list of options
 [select docs](https://daisyui.com/components/select/)
 
 #### Class names
-- component
-  - `select`
-- style
-  - `select-ghost`
-- color
-  - `select-neutral`
-  - `select-primary`
-  - `select-secondary`
-  - `select-accent`
-  - `select-info`
-  - `select-success`
-  - `select-warning`
-  - `select-error`
-- size
-  - `select-xs`
-  - `select-sm`
-  - `select-md`
-  - `select-lg`
-  - `select-xl`
-  
+- component: `select`
+- style: `select-ghost`
+- color: `select-neutral`, `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error`
+- size: `select-xs`, `select-sm`, `select-md`, `select-lg`, `select-xl`
+
 #### Syntax
 ```html
 <select class="select {MODIFIER}">
@@ -1601,14 +1224,13 @@ Select is used to pick a value from a list of options
 - {MODIFIER} is optional and can have one of each style/color/size class names
 
 ### skeleton
-Skeleton is a component that can be used to show a loading state of a component
+Skeleton is a component that can be used to show a loading state
 
 [skeleton docs](https://daisyui.com/components/skeleton/)
 
 #### Class names
-- component
-  - `skeleton`
-  
+- component: `skeleton`
+
 #### Syntax
 ```html
 <div class="skeleton"></div>
@@ -1622,14 +1244,9 @@ Stack visually puts elements on top of each other
 
 [stack docs](https://daisyui.com/components/stack/)
 
-#### Class names
-- component
-  - `stack`
-- modifier
-  - `stack-top`
-  - `stack-bottom`
-  - `stack-start`
-  - `stack-end`
+#### Class Names:
+- Component: `stack`
+- Modifier: `stack-top`, `stack-bottom`, `stack-start`, `stack-end`
   
 #### Syntax
 ```html
@@ -1646,18 +1263,9 @@ Stat is used to show numbers and data in a block
 [stat docs](https://daisyui.com/components/stat/)
 
 #### Class names
-- component
-  - `stats`
-- part
-  - `stat`
-  - `stat-title`
-  - `stat-value`
-  - `stat-desc`
-  - `stat-figure`
-  - `stat-actions`
-- direction
-  - `stats-horizontal`
-  - `stats-vertical`
+- Component: `stats`
+- Part: `stat`, `stat-title`, `stat-value`, `stat-desc`, `stat-figure`, `stat-actions`
+- Direction: `stats-horizontal`, `stats-vertical`
   
 #### Syntax
 ```html
@@ -1676,24 +1284,10 @@ Status is a really small icon to visually show the current status of an element,
 
 [status docs](https://daisyui.com/components/status/)
 
-#### Class names
-- component
-  - `status`
-- color
-  - `status-neutral`
-  - `status-primary`
-  - `status-secondary`
-  - `status-accent`
-  - `status-info`
-  - `status-success`
-  - `status-warning`
-  - `status-error`
-- size
-  - `status-xs`
-  - `status-sm`
-  - `status-md`
-  - `status-lg`
-  - `status-xl`
+#### Class Names:
+- Component: `status`
+- Color: `status-neutral`, `status-primary`, `status-secondary`, `status-accent`, `status-info`, `status-success`, `status-warning`, `status-error`
+- Size: `status-xs`, `status-sm`, `status-md`, `status-lg`, `status-xl`
   
 #### Syntax
 ```html
@@ -1709,24 +1303,11 @@ Steps can be used to show a list of steps in a process
 
 [steps docs](https://daisyui.com/components/steps/)
 
-#### Class names
-- component
-  - `steps`
-- part
-  - `step`
-  - `step-icon`
-- color
-  - `step-neutral`
-  - `step-primary`
-  - `step-secondary`
-  - `step-accent`
-  - `step-info`
-  - `step-success`
-  - `step-warning`
-  - `step-error`
-- direction
-  - `steps-vertical`
-  - `steps-horizontal`
+#### Class Names:
+- Component: `steps`
+- Part: `step`, `step-icon`
+- Color: `step-neutral`, `step-primary`, `step-secondary`, `step-accent`, `step-info`, `step-success`, `step-warning`, `step-error`
+- Direction: `steps-vertical`, `steps-horizontal`
   
 #### Syntax
 ```html
@@ -1746,18 +1327,11 @@ Swap allows you to toggle the visibility of two elements using a checkbox or a c
 
 [swap docs](https://daisyui.com/components/swap/)
 
-#### Class names
-- component
-  - `swap`
-- part
-  - `swap-on`
-  - `swap-off`
-  - `swap-indeterminate`
-- modifier
-  - `swap-active`
-- style
-  - `swap-rotate`
-  - `swap-flip`
+#### Class Names:
+- Component: `swap`
+- Part: `swap-on`, `swap-off`, `swap-indeterminate`
+- Modifier: `swap-active`
+- Style: `swap-rotate`, `swap-flip`
   
 #### Syntax
 Using checkbox
@@ -1787,22 +1361,12 @@ Tabs can be used to show a list of links in a tabbed format
 
 [tab docs](https://daisyui.com/components/tab/)
 
-#### Class names
-- component
-  - `tabs`
-- part
-  - `tab`
-  - `tab-content`
-- style
-  - `tabs-box`
-  - `tabs-border`
-  - `tabs-lift`
-- modifier
-  - `tab-active`
-  - `tab-disabled`
-- placement
-  - `tabs-top`
-  - `tabs-bottom`
+#### Class Names:
+- Component: `tabs`
+- Part: `tab`, `tab-content`
+- Style: `tabs-box`, `tabs-border`, `tabs-lift`
+- Modifier: `tab-active`, `tab-disabled`
+- Placement: `tabs-top`, `tabs-bottom`
   
 #### Syntax
 Using buttons:
@@ -1829,19 +1393,10 @@ Table can be used to show a list of data in a table format
 
 [table docs](https://daisyui.com/components/table/)
 
-#### Class names
-- component
-  - `table`
-- modifier
-  - `table-zebra`
-  - `table-pin-rows`
-  - `table-pin-cols`
-- size
-  - `table-xs`
-  - `table-sm`
-  - `table-md`
-  - `table-lg`
-  - `table-xl`
+#### Class Names:
+- Component: `table`
+- Modifier: `table-zebra`, `table-pin-rows`, `table-pin-cols`
+- Size: `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl`
   
 #### Syntax
 ```html
@@ -1870,26 +1425,11 @@ Textarea allows users to enter text in multiple lines
 
 [textarea docs](https://daisyui.com/components/textarea/)
 
-#### Class names
-- component
-  - `textarea`
-- style
-  - `textarea-ghost`
-- color
-  - `textarea-neutral`
-  - `textarea-primary`
-  - `textarea-secondary`
-  - `textarea-accent`
-  - `textarea-info`
-  - `textarea-success`
-  - `textarea-warning`
-  - `textarea-error`
-- size
-  - `table-xs`
-  - `table-sm`
-  - `table-md`
-  - `table-lg`
-  - `table-xl`
+#### Class Names:
+- Component: `textarea`
+- Style: `textarea-ghost`
+- Color: `textarea-neutral`, `textarea-primary`, `textarea-secondary`, `textarea-accent`, `textarea-info`, `textarea-success`, `textarea-warning`, `textarea-error`
+- Size: `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl`
   
 #### Syntax
 ```html
@@ -1905,8 +1445,7 @@ If a checked checkbox input or a checked radio input with theme-controller class
 [theme-controller docs](https://daisyui.com/components/theme-controller/)
 
 #### Class names
-- component
-  - `theme-controller`
+- component: `theme-controller`
   
 #### Syntax
 ```html
@@ -1921,20 +1460,11 @@ Timeline component shows a list of events in chronological order
 
 [timeline docs](https://daisyui.com/components/timeline/)
 
-#### Class names
-- component
-  - `timeline`
-- part
-  - `timeline-start`
-  - `timeline-middle`
-  - `timeline-end`
-- modifier
-  - `timeline-snap-icon`
-  - `timeline-box`
-  - `timeline-compact`
-- direction
-  - `timeline-vertical`
-  - `timeline-horizontal`
+#### Class Names:
+- Component: `timeline`
+- Part: `timeline-start`, `timeline-middle`, `timeline-end`
+- Modifier: `timeline-snap-icon`, `timeline-box`, `timeline-compact`
+- Direction: `timeline-vertical`, `timeline-horizontal`
   
 #### Syntax
 ```html
@@ -1958,16 +1488,9 @@ Toast is a wrapper to stack elements, positioned on the corner of page
 
 [toast docs](https://daisyui.com/components/toast/)
 
-#### Class names
-- component
-  - `toast`
-- placement
-  - `toast-start`
-  - `toast-center`
-  - `toast-end`
-  - `toast-top`
-  - `toast-middle`
-  - `toast-bottom`
+#### Class Names:
+- Component: `toast`
+- Placement: `toast-start`, `toast-center`, `toast-end`, `toast-top`, `toast-middle`, `toast-bottom`
   
 #### Syntax
 ```html
@@ -1982,24 +1505,10 @@ Toggle is a checkbox that is styled to look like a switch button
 
 [toggle docs](https://daisyui.com/components/toggle/)
 
-#### Class names
-- component
-  - `toggle`
-- color
-  - `toggle-primary`
-  - `toggle-secondary`
-  - `toggle-accent`
-  - `toggle-neutral`
-  - `toggle-success`
-  - `toggle-warning`
-  - `toggle-info`
-  - `toggle-error`
-- size
-  - `toggle-xs`
-  - `toggle-sm`
-  - `toggle-md`
-  - `toggle-lg`
-  - `toggle-xl`
+#### Class Names:
+- Component: `toggle`
+- Color: `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-neutral`, `toggle-success`, `toggle-warning`, `toggle-info`, `toggle-error`
+- Size: `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg`, `toggle-xl`
   
 #### Syntax
 ```html
@@ -2015,10 +1524,8 @@ Validator class changes the color of form elements to error or success based on
 [validator docs](https://daisyui.com/components/validator/)
 
 #### Class names
-- component
-  - `validator`
-- part
-  - `validator-hint`
+- component: `validator`
+- part: `validator-hint`
   
 #### Syntax
 ```html