flowbite-mcp 1.1.2 → 1.1.5

package/data/components/skeleton.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Skeleton - Flowbite
-description: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video
-group: components
-toc: true
-
-previous: Sidebar
-previousLink: components/sidebar/
-next: Speed Dial
-nextLink: components/speed-dial/
----
-
 Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.
 
 You can set the width and height of these skeleton components based on the size of the content and element that it is being loaded in, such as a card or an article page.
@@ -21,7 +8,7 @@ You can also animate the skeleton component by using the `.animate-pulse` utilit
 
 Use this example to show a placeholder when loading text content.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="max-w-sm animate-pulse">
     <div class="h-2.5 bg-neutral-quaternary rounded-full w-48 mb-4"></div>
     <div class="h-2 bg-neutral-quaternary rounded-full max-w-[360px] mb-2.5"></div>
@@ -32,13 +19,13 @@ Use this example to show a placeholder when loading text content.
     <span class="sr-only">Loading...</span>
 </div>
 
-{{< /example >}}
+```
 
 ## Image placeholder
 
 This example can be used to show a placeholder when loading an image and text content.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center">
     <div class="flex items-center justify-center w-full h-48 bg-neutral-quaternary rounded-base sm:w-96">
         <svg class="w-11 h-11 text-fg-disabled" 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="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"/></svg>
@@ -54,25 +41,25 @@ This example can be used to show a placeholder when loading an image and text co
     <span class="sr-only">Loading...</span>
 </div>
 
-{{< /example >}}
+```
 
 ## Video placeholder
 
 Use this example to show a skeleton placeholder when loading video content.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 
 <div role="status" class="flex items-center justify-center h-56 max-w-sm bg-neutral-quaternary rounded-base animate-pulse">
     <svg class="w-11 h-11 text-fg-disabled" 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="M10 3v4a1 1 0 0 1-1 1H5m14-4v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1ZM9 12h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm5.697 2.395v-.733l1.269-1.219v2.984l-1.268-1.032Z"/></svg>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Text placeholder
 
 Use this example to show a placeholder when loading longer pagraphs and headings.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="space-y-2.5 animate-pulse max-w-lg">
     <div class="flex items-center w-full">
         <div class="h-2.5 bg-neutral-quaternary rounded-full w-32"></div>
@@ -106,13 +93,13 @@ Use this example to show a placeholder when loading longer pagraphs and headings
     </div>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Card placeholder
 
 Use this example to show a placeholder when loading content inside a card.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="max-w-sm p-4 border border-default rounded-base shadow-xs animate-pulse md:p-6">
     <div role="status" class="flex items-center justify-center h-48 max-w-sm bg-neutral-quaternary rounded-base animate-pulse mb-4 sm:mb-6">
         <svg class="w-11 h-11 text-fg-disabled" 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="M10 3v4a1 1 0 0 1-1 1H5m14-4v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1ZM9 12h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm5.697 2.395v-.733l1.269-1.219v2.984l-1.268-1.032Z"/></svg>
@@ -131,13 +118,13 @@ Use this example to show a placeholder when loading content inside a card.
     </div>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Widget placeholder
 
 This example can be used to show a placeholder of skeleton when fetching data for widgets and cards inside an application.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="max-w-sm p-4 border border-default rounded-base shadow-xs animate-pulse md:p-6">
     <div class="h-2.5 bg-neutral-quaternary rounded-full w-32 mb-2.5"></div>
     <div class="w-48 h-2 mb-10 bg-neutral-quaternary rounded-full"></div>
@@ -152,13 +139,13 @@ This example can be used to show a placeholder of skeleton when fetching data fo
     </div>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## List placeholder
 
 Use this example to show a placeholder when loading a list of items.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="max-w-md p-4 border border-default divide-y divide-default rounded-base shadow-xs animate-pulse md:p-6">
     <div class="flex items-center justify-between pb-4">
         <div>
@@ -197,13 +184,13 @@ Use this example to show a placeholder when loading a list of items.
     </div>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Testimonial placeholder
 
 This example can be used to show a skeleton placeholder when loading data for a testimonial section.
 
-{{< example github="components/skeleton.md" show_dark=true >}}
+```html
 <div role="status" class="animate-pulse">
     <div class="h-2.5 bg-default rounded-full max-w-[640px] mb-2.5 mx-auto"></div>
     <div class="h-2.5 mx-auto bg-default rounded-full max-w-[540px]"></div>
@@ -214,7 +201,7 @@ This example can be used to show a skeleton placeholder when loading data for a
     </div>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Accessibility
 

package/data/components/speed-dial.md

@@ -1,23 +1,8 @@
----
-layout: docs
-title: Tailwind CSS Speed Dial - Flowbite
-description: The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element.
-group: components
-toc: true
-requires_js: true
-
-previous: Skeleton
-previousLink: components/skeleton/
-
-next: Spinner
-nextLink: components/spinner/
----
-
 Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.
 
 This component can be easily customized by changing the colors, text, icons, sizes, alignment, and even positioning using our examples built with Tailwind CSS and making use of Flowbite's JavaScript API.
 
-Make sure that you have the Flowbite JS file included in your application by following our <a href="{{< ref "getting-started/quickstart" >}}">quickstart guide</a>.
+Make sure that you have the Flowbite JS file included in your application by following our quickstart guide.
 
 ## Default speed dial
 
@@ -25,7 +10,7 @@ To initialize a speed dial component you need to wrap the trigger element and th
 
 Furthermore, make sure that the trigger button element has the `data-dial-toggle="{targetElementId}"` where the value is the ID of the target element.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-default" class="flex flex-col items-center hidden mb-4 space-y-2">
@@ -67,13 +52,13 @@ Furthermore, make sure that the trigger button element has the `data-dial-toggle
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Square speed dial
 
 Use this example to make the trigger button's style square instead of a full circle using the `rounded-lg` utility class.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-square" class="flex flex-col items-center hidden mb-4 space-y-2">
@@ -115,13 +100,13 @@ Use this example to make the trigger button's style square instead of a full cir
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Text inside button
 
 This example can be used to show the descriptive text inside the button instead of a tooltip.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed bottom-6 end-24 group">
     <div id="speed-dial-menu-text-inside-button" class="flex flex-col items-center hidden mb-4 space-y-2">
@@ -172,13 +157,13 @@ This example can be used to show the descriptive text inside the button instead
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Text outside button
 
 Use this example to show the text of each button outside of the speed dial as an alternative style.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-text-outside-button" class="flex flex-col items-center hidden mb-4 space-y-2">
@@ -229,13 +214,13 @@ Use this example to show the text of each button outside of the speed dial as an
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Dropdown menu
 
 This example can be used to show a list of menu items instead of buttons when activating the speed dial.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed bottom-6 right-24 group">
     <div id="speed-dial-menu-dropdown" class="flex flex-col w-32 justify-end hidden mb-4 space-y-2 bg-neutral-primary-medium border border-default-medium rounded-base shadow-xs">
@@ -306,13 +291,13 @@ This example can be used to show a list of menu items instead of buttons when ac
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Alternative menu
 
 This example can be used to show an alternative style when showing a list of menu items.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed bottom-6 right-24 group">
     <div id="speed-dial-menu-dropdown-alternative" class="flex flex-col w-44 justify-end hidden mb-4 space-y-2 bg-neutral-primary-medium border border-default-medium rounded-base shadow-xs">
@@ -371,7 +356,7 @@ This example can be used to show an alternative style when showing a list of men
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Positioning
 
@@ -381,7 +366,7 @@ The positioning of the speed dial component relative to the body element can be
 
 Use the `top-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the top right side of the document body.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed top-6 end-6 group">
     <button type="button" data-dial-toggle="speed-dial-menu-top-right" aria-controls="speed-dial-menu-top-right" aria-expanded="false" class="flex items-center justify-center text-white bg-brand rounded-full w-14 h-14 hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium focus:outline-none">
@@ -423,13 +408,13 @@ Use the `top-{*}` and `right-{*}` utility classes to set the position of the spe
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ### Bottom right
 
 Use the `bottom-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the bottom right side of the document body.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-bottom-right" class="flex flex-col items-center hidden mt-4 space-y-2">
         <button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-body hover:text-heading bg-neutral-primary-soft rounded-full border border-default shadow-xs hover:bg-neutral-secondary-medium hover:border-default-medium focus:ring-4 focus:ring-neutral-secondary-soft focus:outline-none">
@@ -470,13 +455,13 @@ Use the `bottom-{*}` and `right-{*}` utility classes to set the position of the
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ### Bottom left
 
 Use the `bottom-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the bottom left side of the document body.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 <div data-dial-init class="fixed bottom-6 start-6 group">
     <div id="speed-dial-menu-bottom-left" class="flex flex-col items-center hidden mt-4 space-y-2">
         <button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-body hover:text-heading bg-neutral-primary-soft rounded-full border border-default shadow-xs hover:bg-neutral-secondary-medium hover:border-default-medium focus:ring-4 focus:ring-neutral-secondary-soft focus:outline-none">
@@ -517,13 +502,13 @@ Use the `bottom-{*}` and `left-{*}` utility classes to set the position of the s
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ### Top left
 
 Use the `top-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the top left side of the document body.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 <div data-dial-init class="fixed top-6 start-6 group">
     <button type="button" data-dial-toggle="speed-dial-menu-top-left" aria-controls="speed-dial-menu-top-left" aria-expanded="false" class="flex items-center justify-center text-white bg-brand rounded-full w-14 h-14 hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium focus:outline-none">
         <svg class="w-5 h-5 transition-transform group-hover:rotate-45" 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 12h14m-7 7V5"/></svg>
@@ -564,7 +549,7 @@ Use the `top-{*}` and `left-{*}` utility classes to set the position of the spee
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Alignment
 
@@ -574,7 +559,7 @@ The alignment of the speed dial menu items and buttons can be set using the flex
 
 The default alignment of the menu items of the speed dial is vertical using the `flex-col` utility class.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-vertical" class="flex flex-col items-center hidden mt-4 space-y-2">
         <button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-body hover:text-heading bg-neutral-primary-soft rounded-full border border-default shadow-xs hover:bg-neutral-secondary-medium hover:border-default-medium focus:ring-4 focus:ring-neutral-secondary-soft focus:outline-none">
@@ -615,13 +600,13 @@ The default alignment of the menu items of the speed dial is vertical using the
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ### Horizontal
 
 Horizontally align the speed dial menu items by using the flexbox utility classes from Tailwind CSS.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed flex end-6 bottom-6 group">
     <div id="speed-dial-menu-horizontal" class="flex items-center hidden me-4 space-x-2 rtl:space-x-reverse">
@@ -663,7 +648,7 @@ Horizontally align the speed dial menu items by using the flexbox utility classe
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Triggering
 
@@ -673,7 +658,7 @@ Use the `data-dial-trigger="{click|hover}"` data attributes on the trigger eleme
 
 The default trigger type is hover for each speed dial component.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-hover" class="flex flex-col items-center hidden mt-4 space-y-2">
         <button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-body hover:text-heading bg-neutral-primary-soft rounded-full border border-default shadow-xs hover:bg-neutral-secondary-medium hover:border-default-medium focus:ring-4 focus:ring-neutral-secondary-soft focus:outline-none">
@@ -714,13 +699,13 @@ The default trigger type is hover for each speed dial component.
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ### Click
 
 If you want the speed dial component to activate when clicking instead of hovering over the trigger element then you need to set the `click` value inside of the `data-dial-toggle="click"` data attribute on the trigger element.
 
-{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}
+```html
 
 <div data-dial-init class="fixed end-6 bottom-6 group">
     <div id="speed-dial-menu-click" class="flex flex-col items-center hidden mb-4 space-y-2">
@@ -762,7 +747,7 @@ If you want the speed dial component to activate when clicking instead of hoveri
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -1010,7 +995,7 @@ Three arguments are required for the Speed Dial component, namely the parent ele
 
 Furthermore, you can also pass an object of options to set the trigger type and set the callback functions.
 
-{{< code lang="javascript" file="speed-dial.js" icon="file" >}}
+```javascript
 // parent element wrapping the speed dial
 const $parentEl = document.getElementById('dialParent');
 
@@ -1039,11 +1024,11 @@ const instanceOptions = {
   id: 'dialContent',
   override: true
 };
-{{< /code >}}
+```
 
 Create a new Speed Dial object based on the options above.
 
-{{< code lang="javascript" file="speed-dial.js" icon="file" >}}
+```javascript
 import { Dial } from 'flowbite';
 
 /*
@@ -1054,11 +1039,11 @@ import { Dial } from 'flowbite';
  * instanceOptions: optional
  */
 const dial = new Dial($parentEl, $triggerEl, $targetEl, options, instanceOptions);
-{{< /code >}}
+```
 
 Use the `show`, `hide`, or `toggle` methods on the Speed Dial object to programmatically show and hide the speed dial component using JavaScript.
 
-{{< code lang="javascript" file="speed-dial.js" icon="file" >}}
+```javascript
 // show the speed dial
 dial.show();
 
@@ -1067,13 +1052,13 @@ dial.hide();
 
 // toggle the visibility of the speed dial
 dial.toggle();
-{{< /code >}}
+```
 
 ### HTML Markup
 
 Use the following HTML code for the JavaScript example above.
 
-{{< code lang="html" file="speed-dial.html" icon="file" >}}
+```html
 <div id="dialParent" class="group fixed bottom-6 end-6">
     <div
         id="dialContent"
@@ -1215,15 +1200,15 @@ Use the following HTML code for the JavaScript example above.
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
-{{< /code >}}
+```
 
 ### TypeScript
 
-If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> from Flowbite then you can import the types for the Speed Dial class, parameters and its options.
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Speed Dial class, parameters and its options.
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="speed-dial.ts" icon="file" >}}
+```typescript
 import { Dial } from 'flowbite';
 import type { DialOptions, DialInterface } from 'flowbite';
 import type { InstanceOptions } from 'flowbite';
@@ -1267,4 +1252,4 @@ const dial: DialInterface = new Dial($parentEl, $triggerEl, $targetEl, options);
 
 // show the speed dial
 dial.show();
-{{< /code >}}
+```

package/data/components/spinner.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Spinner - Flowbite
-description: Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS
-group: components
-toc: true
-
-previous: Speed Dial
-previousLink: components/speed-dial/
-next: Stepper
-nextLink: components/stepper/
----
-
 The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
 
 ## Default spinner
 
 Use the following SVG element with the `animate-spin` animation class to show a loading animation:
 
-{{< example github="components/spinner.md" show_dark=true >}}
+```html
 <div role="status">
     <svg aria-hidden="true" class="w-8 h-8 text-neutral-tertiary animate-spin fill-brand" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
@@ -25,7 +12,7 @@ Use the following SVG element with the `animate-spin` animation class to show a
     </svg>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Colors
 
@@ -34,7 +21,7 @@ You can change the colors of the spinner element using the fill and color utilit
 -   use `fill-{*}` to change the main colors
 -   use `text-{*}` to change the background
 
-{{< example github="components/spinner.md" class="flex items-center space-x-2 rtl:space-x-reverse" show_dark=true >}}
+```html
 <div role="status">
     <svg aria-hidden="true" class="inline w-8 h-8 w-8 h-8 text-neutral-tertiary animate-spin fill-brand" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
@@ -84,13 +71,13 @@ You can change the colors of the spinner element using the fill and color utilit
     </svg>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Sizes
 
 Change the size of the spinner component using the `h-{*}` and `w-{*}` utility classes from Tailwind CSS:
 
-{{< example github="components/spinner.md" class="flex items-center space-x-2 rtl:space-x-reverse" show_dark=true >}}
+```html
 
 <div role="status">
     <svg aria-hidden="true" class="inline w-4 h-4 w-8 h-8 text-neutral-tertiary animate-spin fill-brand" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -120,13 +107,13 @@ Change the size of the spinner component using the `h-{*}` and `w-{*}` utility c
     </svg>
     <span class="sr-only">Loading...</span>
 </div>
-{{< /example >}}
+```
 
 ## Alignment
 
 Because the spinner component is an inline HTML element it can easily be aligned on the left, center, or right side using the `text-{left|center|right}` utility classes:
 
-{{< example github="components/spinner.md" show_dark=true >}}
+```html
 
 <div class="text-left rtl:text-right">
     <div role="status">
@@ -155,13 +142,13 @@ Because the spinner component is an inline HTML element it can easily be aligned
         <span class="sr-only">Loading...</span>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Spinner with card
 
 Use this animated loading indicator when content inside of a card is still loading.
 
-{{< example github="components/spinner.md" show_dark=true >}}
+```html
 
 <div class="relative items-center block max-w-sm p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <h5 class="mb-2 text-xl font-semibold tracking-tight text-heading opacity-20">Noteworthy technology acquisitions 2021</h5>
@@ -171,13 +158,13 @@ Use this animated loading indicator when content inside of a card is still loadi
         <span class="sr-only">Loading...</span>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Progress spinner
 
 Use this animated spinner component inside a list of steppers elements.
 
-{{< example github="components/spinner.md" show_dark=true >}}
+```html
 
 <h2 class="mb-4 text-lg font-medium text-heading">Converting your image:</h2>
 <ul class="max-w-md space-y-3 text-body list-inside">
@@ -197,13 +184,13 @@ Use this animated spinner component inside a list of steppers elements.
         Preparing your file
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Buttons
 
 The spinner component can also be used inside elements such as buttons when submitting form data:
 
-{{< example github="components/spinner.md" show_dark=true >}}
+```html
 
 <button type="button" class="inline-flex items-center text-body bg-neutral-primary-soft border border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary-soft shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
     <svg aria-hidden="true" class="w-4 h-4 text-neutral-tertiary animate-spin fill-brand me-2" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -213,7 +200,7 @@ The spinner component can also be used inside elements such as buttons when subm
     Loading...
 </button>
 
-{{< /example >}}
+```
 
 ## Accessibillity