flowbite-mcp 1.1.2 → 1.1.5

package/data/components/qr-code.md

@@ -1,96 +1,3 @@
----
-layout: docs
-title: Tailwind CSS QR Code Generator - Flowbite
-description: Use this component to generate and show QR codes based on text or URL that can be scanned with device phone cameras and other devices using the Flowbite library based on Tailwind CSS
-group: components
-toc: true
-
-previous: Typography
-previousLink: components/typography/
-next: Video
-nextLink: components/video/
----
-
-<div class="grid sm:grid-cols-2 gap-8 sm:bg-neutral-primary sm:border border-light-subtle sm:rounded-base sm:p-8 mb-8">
-  <div class="space-y-4">
-    <p class="text-body">Generate QR codes from text or URLs.</p>
-    <label for="qr_code_value" class="block mb-2.5 text-sm font-medium text-heading">Value:</label>
-    <input type="text" id="qr_code_value" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="https://flowbite.com" required />
-    <label for="qr_code_correction" class="block mb-2.5 text-sm font-medium text-heading">Correction level:</label>
-    
-  <div class="inline-flex rounded-base shadow-xs -space-x-px" role="group">
-    <button data-popover-target="popover-qr-l" data-qr-code-level="L" data-qr-code-active="false" type="button" class="inline-flex items-center justify-center text-body bg-neutral-primary-soft border border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-3 focus:ring-neutral-tertiary-soft font-medium leading-5 rounded-s-base text-sm w-9 h-9 focus:outline-none data-[qr-code-active=true]:text-fg-brand">
-      L
-    </button>
-    <div data-popover id="popover-qr-l" role="tooltip" class="absolute z-10 invisible inline-block w-72 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
-        <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
-            <h3 class="font-medium text-heading">L (Low) – Recovers 7% of data</h3>
-        </div>
-        <div class="px-3 py-2">
-            <p>Best for simple, high-quality printing where space efficiency is important.</p>
-        </div>
-        <div data-popper-arrow></div>
-    </div>
-    <button data-popover-target="popover-qr-m" data-qr-code-level="M" data-qr-code-active="true" type="button" class="inline-flex items-center justify-center text-body bg-neutral-primary-soft border border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-3 focus:ring-neutral-tertiary-soft font-medium leading-5 text-sm w-9 h-9 focus:outline-none data-[qr-code-active=true]:text-fg-brand">
-      M
-    </button>
-    <div data-popover id="popover-qr-m" role="tooltip" class="absolute z-10 invisible inline-block w-72 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
-        <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
-            <h3 class="font-medium text-heading">M (Medium) – Recovers 15% of data</h3>
-        </div>
-        <div class="px-3 py-2">
-            <p>Most commonly used; good balance of size and robustness.</p>
-        </div>
-        <div data-popper-arrow></div>
-    </div>
-    <button data-popover-target="popover-qr-q" data-qr-code-level="Q" data-qr-code-active="false" type="button" class="inline-flex items-center justify-center text-body bg-neutral-primary-soft border border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-3 focus:ring-neutral-tertiary-soft font-medium leading-5 text-sm w-9 h-9 focus:outline-none data-[qr-code-active=true]:text-fg-brand">
-      Q
-    </button>
-    <div data-popover id="popover-qr-q" role="tooltip" class="absolute z-10 invisible inline-block w-72 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
-        <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
-            <h3 class="font-medium text-heading">Q (Quartile) – Recovers 25% of data</h3>
-        </div>
-        <div class="px-3 py-2">
-            <p>More resilient; useful when the code may get smudged or partially covered.</p>
-        </div>
-        <div data-popper-arrow></div>
-    </div>
-    <button data-popover-target="popover-qr-h" data-qr-code-level="H" data-qr-code-active="false" type="button" class="inline-flex items-center justify-center text-body bg-neutral-primary-soft border border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-3 focus:ring-neutral-tertiary-soft font-medium leading-5 rounded-e-base text-sm w-9 h-9 focus:outline-none data-[qr-code-active=true]:text-fg-brand">
-      H
-    </button>
-    <div data-popover id="popover-qr-h" role="tooltip" class="absolute z-10 invisible inline-block w-72 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
-        <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
-            <h3 class="font-medium text-heading">H (High) – Recovers 30% of data</h3>
-        </div>
-        <div class="px-3 py-2">
-            <p>Highest durability; used when maximum protection is needed (e.g., logos in the center of the code or harsh conditions).</p>
-        </div>
-        <div data-popper-arrow></div>
-    </div>
-  </div>
-  </div>
-  <div class="flex justify-center flex-col">
-    <div class="flex justify-center p-2 bg-neutral-secondary-medium rounded-base mb-4">
-      <div id="qrcode" class="w-56 h-56"></div>
-    </div>
-    <div class="grid grid-cols-2 gap-4">
-      <button type="button" id="copy-qr-code-button" class="text-white inline-flex items-center justify-center gap-2 bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
-        <svg id="default-copy-qr-code-icon" class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M9 8v3a1 1 0 0 1-1 1H5m11 4h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v1m4 3v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7.13a1 1 0 0 1 .24-.65L7.7 8.35A1 1 0 0 1 8.46 8H13a1 1 0 0 1 1 1Z"/>
-        </svg>
-        <svg id="success-copy-qr-code-icon" class="w-4 h-4 hidden text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
-        </svg>
-        <span id="copy-qr-code-text">Copy as SVG</span>
-      </button>
-      <button id="save-qr-code-button" type="button" class="text-body inline-flex items-center justify-center gap-2 bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none"><svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2m-1-5-4 5-4-5m9 8h.01"/>
-</svg>
-Save as file</button>
-    </div>
-  </div>
-</div>
-
 QR codes are a popular way to encode information such as website links, texts, and other data into a two-dimensional barcode that can be scanned with a phone camera or other devices. The Flowbite component allows you to couple them with other elements such as input fields, tooltips, tab selectors, and more.
 
 Use this free QR code generator and customize the parameters to see the live preview.
@@ -101,18 +8,45 @@ The component examples below are generated using the data you provided in the ge
 
 Use this example as a simple QR code with SVG embedded directly in the HTML.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true >}}
+```html
 <div id="qrcode" class="w-48 h-48">
   <svg class="text-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" shape-rendering="crispEdges"><path fill="none" d="M0 0h29v29H0z"></path><path stroke="currentColor" d="M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1"></path></svg>
 </div>
-{{< /example >}}
+```
 
 ## QR code with input
 
 Use this example to show a QR code with SVG and a copy to clipboard input element below.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true javascript=`
+```html
+<div class="w-56 flex justify-center items-center flex-col">
+  <div id="qrcode" class="w-48 h-48">
+    <svg class="text-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" shape-rendering="crispEdges"><path fill="none" d="M0 0h29v29H0z"></path><path stroke="currentColor" d="M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1"></path></svg>
+  </div>
+
+  <div class="w-full max-w-[18rem]">
+      <div class="relative">
+          <label for="npm-install-copy-button" class="sr-only">Label</label>
+          <input id="npm-install-copy-button" type="text" class="col-span-6 bg-neutral-secondary-medium border border-default-medium text-body text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" value="flowbite.com" disabled readonly>
+          <button data-copy-to-clipboard-target="npm-install-copy-button" data-tooltip-target="tooltip-copy-npm-install-copy-button" class="absolute end-2 top-1/2 -translate-y-1/2 text-body hover:bg-neutral-quaternary rounded p-1.5 inline-flex items-center justify-center">
+              <span id="default-icon">
+                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 5h6m-6 4h6M10 3v4h4V3h-4Z"/></svg>
+              </span>
+              <span id="success-icon" class="hidden">
+                  <svg class="w-4 h-4 text-fg-brand" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 7 2 2 4-4m-5-9v4h4V3h-4Z"/></svg>
+              </span>
+          </button>
+          <div id="tooltip-copy-npm-install-copy-button" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
+              <span id="default-tooltip-message">Copy to clipboard</span>
+              <span id="success-tooltip-message" class="hidden">Copied!</span>
+              <div class="tooltip-arrow" data-popper-arrow></div>
+          </div>
+      </div>
+  </div>
+</div>
+```
 
+```javascript
 window.addEventListener('load', function () {
     const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');
     const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');
@@ -148,39 +82,13 @@ window.addEventListener('load', function () {
         tooltip.hide();
     }
 })
-` >}}
-<div class="w-56 flex justify-center items-center flex-col">
-  <div id="qrcode" class="w-48 h-48">
-    <svg class="text-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" shape-rendering="crispEdges"><path fill="none" d="M0 0h29v29H0z"></path><path stroke="currentColor" d="M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1"></path></svg>
-  </div>
-
-  <div class="w-full max-w-[18rem]">
-      <div class="relative">
-          <label for="npm-install-copy-button" class="sr-only">Label</label>
-          <input id="npm-install-copy-button" type="text" class="col-span-6 bg-neutral-secondary-medium border border-default-medium text-body text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" value="flowbite.com" disabled readonly>
-          <button data-copy-to-clipboard-target="npm-install-copy-button" data-tooltip-target="tooltip-copy-npm-install-copy-button" class="absolute end-2 top-1/2 -translate-y-1/2 text-body hover:bg-neutral-quaternary rounded p-1.5 inline-flex items-center justify-center">
-              <span id="default-icon">
-                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 5h6m-6 4h6M10 3v4h4V3h-4Z"/></svg>
-              </span>
-              <span id="success-icon" class="hidden">
-                  <svg class="w-4 h-4 text-fg-brand" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 7 2 2 4-4m-5-9v4h4V3h-4Z"/></svg>
-              </span>
-          </button>
-          <div id="tooltip-copy-npm-install-copy-button" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
-              <span id="default-tooltip-message">Copy to clipboard</span>
-              <span id="success-tooltip-message" class="hidden">Copied!</span>
-              <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
-      </div>
-  </div>
-</div>
-{{< /example >}}
+```
 
 ## QR code with card
 
 This example can be used to show a QR code inside a card element with a title and description.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true >}}
+```html
 <div class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs">
     <a href="#">
         <div class="rounded-base bg-brand flex justify-center items-center">
@@ -197,13 +105,13 @@ This example can be used to show a QR code inside a card element with a title an
         What's a QR code?
     </a>
 </div>
-{{< /example >}}
+```
 
 ## Share profile with QR
 
 Use this example to share profile information using a QR code with profile details.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true >}}
+```html
 <div class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs">
     <div class="flex flex-col items-center justify-center gap-2">
       <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
@@ -216,13 +124,13 @@ Use this example to share profile information using a QR code with profile detai
     </a>
     <p class="text-body text-center">Share your QR code and make it easy for others to follow you.</p>
 </div>
-{{< /example >}}
+```
 
 ## Loading state
 
 This example can be used to show a loading state right after the QR code was scanned with the camera.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true >}}
+```html
 <div class="relative">
   <div class="absolute top-0 start-0 w-full h-full bg-neutral-primary/95 z-10 gap-2 flex items-center justify-center flex-col">
     <div role="status">
@@ -237,13 +145,13 @@ This example can be used to show a loading state right after the QR code was sca
     <svg class="text-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" shape-rendering="crispEdges"><path fill="none" d="M0 0h29v29H0z"></path><path stroke="currentColor" d="M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1"></path></svg>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Success state
 
 Use this component to show a success state after the QR code was scanned and the data was processed.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true >}}
+```html
 <div class="relative">
   <div class="absolute top-0 start-0 w-full h-full bg-neutral-primary/95 z-10 gap-2 flex items-center justify-center flex-col">
     <svg class="w-6 h-6 text-fg-success" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -255,13 +163,13 @@ Use this component to show a success state after the QR code was scanned and the
     <svg class="text-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" shape-rendering="crispEdges"><path fill="none" d="M0 0h29v29H0z"></path><path stroke="currentColor" d="M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1"></path></svg>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Expired state
 
 You can use this component to show that the QR code has expired and allow the user to refresh the code.
 
-{{< example github="components/alerts.md" class="flex justify-center" show_dark=true >}}
+```html
 <div class="relative">
   <div class="absolute top-0 start-0 w-full h-full bg-neutral-primary/95 z-10 gap-2 flex items-center justify-center flex-col">
     <svg class="w-6 h-6 text-fg-danger" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -277,4 +185,4 @@ Refresh</button>
     <svg class="text-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" shape-rendering="crispEdges"><path fill="none" d="M0 0h29v29H0z"></path><path stroke="currentColor" d="M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1"></path></svg>
   </div>
 </div>
-{{< /example >}}
+```

package/data/components/rating.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Rating - Flowbite
-description: Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes
-group: components
-toc: true
-
-previous: Progress bar
-previousLink: components/progress/
-next: Sidebar
-nextLink: components/sidebar/
----
-
 Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers using the utility classes from Tailwind CSS and components from Flowbite.
 
 You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.
@@ -19,7 +6,7 @@ You can find multiple examples on this page including different styles, sizes, a
 
 Use this simple example of a star rating component for showing review results.
 
-{{< example class="flex justify-center" github="components/rating.md" show_dark=true >}}
+```html
 
 <div class="flex items-center space-x-1">
     <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
@@ -28,13 +15,13 @@ Use this simple example of a star rating component for showing review results.
     <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
     <svg class="w-5 h-5 text-fg-disabled" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
 </div>
-{{< /example >}}
+```
 
 ## Rating with text
 
 If you also want to show a text near the stars you can use this example as a reference.
 
-{{< example class="flex justify-center" github="components/rating.md" show_dark=true >}}
+```html
 
 <div class="flex items-center">
     <div class="flex items-center space-x-1">
@@ -46,13 +33,13 @@ If you also want to show a text near the stars you can use this example as a ref
     </div>
     <p class="ms-2 text-sm font-medium text-body">4.95 out of 5</p>
 </div>
-{{< /example >}}
+```
 
 ## Rating count
 
 Aggregate more results by using this example to show the amount of reviews and the average score.
 
-{{< example class="flex justify-center" github="components/rating.md" show_dark=true >}}
+```html
 
 <div class="flex items-center">
     <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
@@ -60,13 +47,13 @@ Aggregate more results by using this example to show the amount of reviews and t
     <span class="w-1 h-1 mx-1.5 bg-neutral-quaternary rounded-full"></span>
     <a href="#" class="text-sm font-medium text-heading underline hover:no-underline">73 reviews</a>
 </div>
-{{< /example >}}
+```
 
 ## Star sizes
 
 Check out the different sizing options for the star review component from small, medium, and large.
 
-{{< example class="flex flex-col items-center space-y-4" github="components/rating.md" show_dark=true >}}
+```html
 <div class="flex items-center space-x-1">
     <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
     <svg class="w-5 h-5 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
@@ -88,13 +75,13 @@ Check out the different sizing options for the star review component from small,
     <svg class="w-7 h-7 text-fg-yellow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
     <svg class="w-7 h-7 text-fg-disabled" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"/></svg>
 </div>
-{{< /example >}}
+```
 
 ## Advanced rating
 
 This advanced rating component can be used to also show how many reviews have been posted for each star rating (eg. 4% for the 2 star ratings, 17% for 4 star rating etc).
 
-{{< example github="components/rating.md" show_dark=true >}}
+```html
 
 <div class="flex items-center mb-3">
     <div class="flex items-center space-x-1">
@@ -142,13 +129,13 @@ This advanced rating component can be used to also show how many reviews have be
     </div>
     <span class="text-sm font-medium text-body">1%</span>
 </div>
-{{< /example >}}
+```
 
 ## Score rating
 
 This component can be used to break up a general rating score into multiple categories using progress bars.
 
-{{< example github="components/rating.md" show_dark=true >}}
+```html
 
 <div class="flex items-center mb-5">
     <p class="bg-brand-softer text-fg-brand-strong text-sm font-semibold inline-flex items-center p-1.5 rounded-base">8.7</p>
@@ -226,13 +213,13 @@ This component can be used to break up a general rating score into multiple cate
         </dl>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Rating comment
 
 Use this component to show a single rating comment and its score alongside other components such as the user profile avatar, name, post date, and more.
 
-{{< example github="components/rating.md" show_dark=true >}}
+```html
 
 <article>
     <div class="flex items-center mb-4">
@@ -261,13 +248,13 @@ Use this component to show a single rating comment and its score alongside other
         </div>
     </aside>
 </article>
-{{< /example >}}
+```
 
 ## Review content
 
 Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.
 
-{{< example github="components/rating.md" show_dark=true >}}
+```html
 
 <article class="md:gap-8 md:grid md:grid-cols-3">
     <div>
@@ -320,4 +307,4 @@ Use this component to show the review content from a user alongside the avatar,
         </aside>
     </div>
 </article>
-{{< /example >}}
+```

package/data/components/sidebar.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Sidebar - Flowbite
-description: Use the sidebar component to show a list of menu items and multi-level menu items on either side of the page to navigate on your website
-group: components
-toc: true
-
-previous: Rating
-previousLink: components/rating/
-next: Skeleton
-nextLink: components/skeleton/
----
-
 The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level menu items, call to actions elements, and more.
 
 ## Default sidebar
 
 Use this example to show a responsive list of menu items inside the sidebar with icons and labels.
 
-{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="600" iframeMaxHeight="640" show_dark=true >}}
+```html
 <button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base ms-3 mt-3 text-sm p-2 focus:outline-none inline-flex sm:hidden">
    <span class="sr-only">Open sidebar</span>
    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -145,17 +132,15 @@ Use this example to show a responsive list of menu items inside the sidebar with
       </div>
    </div>
 </div>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Multi-level menu
 
 Use this sidebar example to create multi-level menu items by applying the `data-collapse-toggle="id"` data attribute from Flowbite and toggle the second-level menu item.
 
-{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}
+```html
 <button data-drawer-target="sidebar-multi-level-sidebar" data-drawer-toggle="sidebar-multi-level-sidebar" aria-controls="sidebar-multi-level-sidebar" type="button" class="text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base ms-3 mt-3 text-sm p-2 focus:outline-none inline-flex sm:hidden">
    <span class="sr-only">Open sidebar</span>
    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -301,13 +286,13 @@ Use this sidebar example to create multi-level menu items by applying the `data-
       </div>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## Content separator
 
 Separate the content inside the sidebar component by applying a border separator between the two menus.
 
-{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}
+```html
 <button  data-drawer-target="separator-sidebar" data-drawer-toggle="separator-sidebar" aria-controls="separator-sidebar" type="button" class="text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base ms-3 mt-3 text-sm p-2 focus:outline-none inline-flex sm:hidden">
    <span class="sr-only">Open sidebar</span>
    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -473,13 +458,13 @@ Separate the content inside the sidebar component by applying a border separator
       </div>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## CTA button
 
 Use this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.
 
-{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}
+```html
 
 <button data-drawer-target="cta-button-sidebar" data-drawer-toggle="cta-button-sidebar" aria-controls="cta-button-sidebar" type="button" class="text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base ms-3 mt-3 text-sm p-2 focus:outline-none inline-flex sm:hidden">
    <span class="sr-only">Open sidebar</span>
@@ -645,13 +630,13 @@ Use this example to add a CTA button inside the sidebar component and encourage
       </div>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## Logo branding
 
 Show the logo of your brand and link back to the homepage from the top part of the sidebar.
 
-{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}
+```html
 <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base ms-3 mt-3 text-sm p-2 focus:outline-none inline-flex sm:hidden">
    <span class="sr-only">Open sidebar</span>
    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -783,13 +768,13 @@ Show the logo of your brand and link back to the homepage from the top part of t
       </div>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## Sidebar with navbar
 
 Use this example to show a navbar together with a sidebar layout for your web application.
 
-{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}
+```html
 
 <nav class="fixed top-0 z-50 w-full bg-neutral-primary-soft border-b border-default">
   <div class="px-3 py-3 lg:px-5 lg:pl-3">
@@ -968,13 +953,13 @@ Use this example to show a navbar together with a sidebar layout for your web ap
       </div>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## Off-canvas sidebar
 
 Use this example to show the navigation as an off-canvas drawer component when clicking on an element.
 
-{{< example github="components/sidebar.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}
+```html
 
 <!-- drawer init and show -->
 <div class="text-center">
@@ -1056,7 +1041,7 @@ Use this example to show the navigation as an off-canvas drawer component when c
       </ul>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## More examples