flowbite-mcp 1.1.3 → 1.1.5

package/data/components/card.md

@@ -1,34 +1,21 @@
----
-layout: docs
-title: Tailwind CSS Cards - Flowbite
-description: Get started with a large variety of Tailwind CSS card examples for your web project
-group: components
-toc: true
-
-previous: Button group
-previousLink: components/button-group/
-next: Carousel
-nextLink: components/carousel/
----
-
 Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
 
 ## Default card
 
 Use the following simple card component with a title and description.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 <a href="#" class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs hover:bg-neutral-secondary-medium">
     <h5 class="mb-3 text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
     <p class="text-body">Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
 </a>
-{{< /example >}}
+```
 
 ## Card with button
 
 Use the following example of a card element if you also want to have an action button.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs">
     <h5 class="mb-3 text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
@@ -38,13 +25,13 @@ Use the following example of a card element if you also want to have an action b
         <svg class="w-4 h-4 ms-1.5 rtl:rotate-180 -me-0.5" 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="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
     </a>
 </div>
-{{< /example >}}
+```
 
 ## Card with link
 
 This example can be used to show a CTA as a link instead of a button inside the card.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs">
     <svg class="w-7 h-7 mb-3 text-body" 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="M10 21v-9m3-4H7.5a2.5 2.5 0 1 1 0-5c1.5 0 2.875 1.25 3.875 2.5M14 21v-9m-9 0h14v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8ZM4 8h16a1 1 0 0 1 1 1v3H3V9a1 1 0 0 1 1-1Zm12.155-5c-3 0-5.5 5-5.5 5h5.5a2.5 2.5 0 0 0 0-5Z"/></svg>
@@ -57,13 +44,13 @@ This example can be used to show a CTA as a link instead of a button inside the
         <svg class="w-4 h-4 ms-2 rtl:rotate-[270deg]" 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="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"/></svg>
     </a>
 </div>
-{{< /example >}}
+```
 
 ## Card with image
 
 You can use the following example of a card element with an image for blog posts, user cards, and many more.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="bg-neutral-primary-soft block max-w-sm border border-default rounded-base shadow-xs">
     <a href="#">
@@ -83,13 +70,13 @@ You can use the following example of a card element with an image for blog posts
         </a>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card with description
 
 Use this alternative styled card with an image for features, blog posts, and more.
 
-{{< example class="flex justify-center" github="components/card.md" 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="#">
@@ -104,13 +91,13 @@ Use this alternative styled card with an image for features, blog posts, and mor
         <svg class="w-4 h-4 ms-1.5 rtl:rotate-180 -me-0.5" 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="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
     </a>
 </div>
-{{< /example >}}
+```
 
 ## Horizontal card
 
 If you want to spice up your cards you can use the following card which has its child elements aligned horizontally.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 <a href="#" class="flex flex-col items-center bg-neutral-primary-soft p-6 border border-default rounded-base shadow-xs md:flex-row md:max-w-xl md:flex-row md:max-w-xl">
     <img class="object-cover w-full rounded-base h-64 md:h-auto md:w-48 mb-4 md:mb-0" src="/docs/images/blog/image-4.jpg" alt="">
     <div class="flex flex-col justify-between md:p-4 leading-normal">
@@ -124,13 +111,13 @@ If you want to spice up your cards you can use the following card which has its
         </div>
     </div>
 </a>
-{{< /example >}}
+```
 
 ## User profile card
 
 Use this user profile card example if you want to show a dropdown menu and buttons to enable multiple actions from your user.
 
-{{< example class="flex flex-wrap justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="relative bg-neutral-primary-soft max-w-xs w-full p-6 border border-default rounded-base shadow-xs">
         <button id="dropdownButton" data-dropdown-toggle="dropdown" class="absolute top-2 end-2 text-body hover:text-heading bg-neutral-primary-soft box-border border border-transparent hover:bg-neutral-tertiary focus:ring-4 focus:ring-neutral-tertiary rounded-base p-1.5 focus:outline-none" type="button">
@@ -166,13 +153,13 @@ Use this user profile card example if you want to show a dropdown menu and butto
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card with form inputs
 
 Use this card example where you can add form input elements that can be used for authentication actions or any other context where you need to receive information from your users.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full max-w-sm bg-neutral-primary-soft p-6 border border-default rounded-base shadow-xs">
     <form action="#">
@@ -196,13 +183,13 @@ Use this card example where you can add form input elements that can be used for
         <div class="text-sm font-medium text-body">Not registered? <a href="#" class="text-fg-brand hover:underline">Create account</a></div>
     </form>
 </div>
-{{< /example >}}
+```
 
 ## E-commerce card
 
 Use this card for your e-commerce websites and show information about the products and enable actions such as adding a review and adding the product to the cart.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full max-w-sm bg-neutral-primary-soft p-6 border border-default rounded-base shadow-xs">
     <a href="#">
@@ -231,13 +218,13 @@ Use this card for your e-commerce websites and show information about the produc
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Call to action card
 
 Use this CTA card example to encourage your users to visit a certain page such as downloading the iOS or Android application for your project.
 
-{{< example github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full text-center bg-neutral-primary-soft p-6 border border-default rounded-base shadow-xs">
     <h5 class="mb-3 text-2xl tracking-tight font-semibold text-heading">Work fast from anywhere</h5>
@@ -259,13 +246,13 @@ Use this CTA card example to encourage your users to visit a certain page such a
         </a>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card with nav tabs
 
 Use this example of a card component with navigation tabs that can change the content inside the card based on which one is currently active.
 
-{{< example github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full bg-neutral-primary border border-default rounded-base shadow-xs">
     <ul class="flex flex-wrap text-sm font-medium text-center text-body bg-neutral-secondary-soft border-b border-default rounded-t-base" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
@@ -328,13 +315,13 @@ Use this example of a card component with navigation tabs that can change the co
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card full width tabs
 
 Use this example of a card component to show tabs that span the full width of the element and change the content area clicking on each one.
 
-{{< example github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full bg-neutral-primary border border-default rounded-base shadow-xs">
     <div class="sm:hidden">
@@ -418,7 +405,7 @@ Use this example of a card component to show tabs that span the full width of th
               <div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
                 <div class="py-5 border-b border-default text-body">
                   <p class="mb-2">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-                  <p>Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+                  <p>Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
                 </div>
               </div>
               <h2 id="accordion-flush-heading-3">
@@ -433,7 +420,7 @@ Use this example of a card component to show tabs that span the full width of th
                   <p class="mb-2">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
                   <p class="mb-2">Learn more about these technologies:</p>
                   <ul class="ps-5 list-disc">
-                    <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+                    <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
                     <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
                   </ul>
                 </div>
@@ -442,13 +429,13 @@ Use this example of a card component to show tabs that span the full width of th
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card with list
 
 Use this card example if you want to show a list of data:
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full max-w-sm p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <div class="flex items-center justify-between mb-4">
@@ -550,13 +537,13 @@ Use this card example if you want to show a list of data:
         </ul>
    </div>
 </div>
-{{< /example >}}
+```
 
 ## Pricing card
 
 Show detailed information to potential customers about your product's pricing plan, list of features, and a purchase button.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 
 <div class="w-full max-w-sm p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <h5 class="mb-4 text-xl font-medium text-body">Standard plan</h5>
@@ -596,13 +583,13 @@ Show detailed information to potential customers about your product's pricing pl
     </ul>
     <button type="button" class="w-full text-white bg-brand hover:bg-brand-strong box-border border border-transparent 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">Choose plan</button>
 </div>
-{{< /example >}}
+```
 
 ## Testimonial card
 
 Use this example to split cards into multiple sections such as for testimonials or reviews.
 
-{{< example github="components/card.md" show_dark=true >}}
+```html
 
 <div class="grid mb-8 bg-neutral-primary-soft border border-default rounded-base shadow-xs md:mb-12 md:grid-cols-2">
     <figure class="flex flex-col items-center justify-center p-8 text-center border-b border-default rounded-t-base md:rounded-t-none md:rounded-ss-base md:border-e">
@@ -658,13 +645,13 @@ Use this example to split cards into multiple sections such as for testimonials
         </figcaption>    
     </figure>
 </div>
-{{< /example >}}
+```
 
 ## Crypto card
 
 Use this web3 card component to show a list of applications that you can use to connect your crypto wallet for NFT related trading and authentication.
 
-{{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
+```html
 <div class="w-full max-w-sm p-4 sm:p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <h5 class="mb-2 text-base md:text-xl font-semibold text-heading">Connect wallet</h5>
     <p class="text-body">Connect with one of our available wallet providers or create a new one.</p>
@@ -708,4 +695,4 @@ Use this web3 card component to show a list of applications that you can use to
     </a>
     </div>
 </div>
-{{< /example >}}
+```

package/data/components/carousel.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Carousel - Flowbite
-description: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
-group: components
-toc: true
-requires_js: true
-
-previous: Card
-previousLink: components/card/
-next: Chat bubble
-nextLink: components/chat-bubble/
----
-
 The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators based on the JavaScript object from Flowbite.
 
 ## Default slider
@@ -25,7 +11,7 @@ You can add as many carousel items as you want, but make sure that you add the `
 
 Use the `duration-*` and the animation classes from Tailwind CSS to apply custom effects to the carousel items and don't forget to set the `hidden` class by default to prevent flickering.
 
-{{< example github="components/carousel.md" show_dark=true >}}
+```html
 
 <div id="default-carousel" class="relative w-full" data-carousel="slide">
     <!-- Carousel wrapper -->
@@ -73,7 +59,7 @@ Use the `duration-*` and the animation classes from Tailwind CSS to apply custom
         </span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Controls
 
@@ -81,7 +67,7 @@ Use the `data-carousel-prev` and `data-carousel-next` data attribute to listen t
 
 You can customize the control elements with the classes from Tailwind CSS anyhow you want.
 
-{{< example github="components/carousel.md" show_dark=true >}}
+```html
 
 <div id="controls-carousel" class="relative w-full" data-carousel="static">
     <!-- Carousel wrapper -->
@@ -121,13 +107,13 @@ You can customize the control elements with the classes from Tailwind CSS anyhow
         </span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Indicators
 
 Show the carousel indicators by adding the `data-carousel-slide-to={position}` to any number or style of indicator elements where the value equals the position of the slider element.
 
-{{< example github="components/carousel.md" show_dark=true >}}
+```html
 
 <div id="indicators-carousel" class="relative w-full" data-carousel="static">
     <!-- Carousel wrapper -->
@@ -175,13 +161,13 @@ Show the carousel indicators by adding the `data-carousel-slide-to={position}` t
         </span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## Animation
 
 You can easily customize the duration and animation style of the carousel component by using the `duration-*` and `ease-*` utility classes from Tailwind CSS.
 
-{{< example github="components/carousel.md" show_dark=true >}}
+```html
 
 <div id="animation-carousel" class="relative w-full" data-carousel="static">
     <!-- Carousel wrapper -->
@@ -221,7 +207,7 @@ You can easily customize the duration and animation style of the carousel compon
         </span>
     </button>
 </div>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -505,7 +491,7 @@ Use the following methods on the Carousel object to programmatically manipulate
 
 Check out the following example to learn how to programmatically create a new Carousel object by passing the parameters, using the methods, and the callback functions.
 
-{{< code lang="javascript" file="carousel.js" icon="file" >}}
+```javascript
 const carouselElement = document.getElementById('carousel-example');
 
 const items = [
@@ -573,48 +559,48 @@ const instanceOptions = {
   id: 'carousel-example',
   override: true
 };
-{{< /code >}}
+```
 
 Create a new carousel object using the options set above.
 
-{{< code lang="javascript" file="carousel.js" icon="file" >}}
+```javascript
 import { Carousel } from 'flowbite';
 
 const carousel = new Carousel(carouselElement, items, options, instanceOptions);
-{{< /code >}}
+```
 
 Use the `next()` and `prev()` public methods on the carousel object to jump to the left or right carousel slide item based on the position of the current active item.
 
-{{< code lang="javascript" file="carousel.js" icon="file" >}}
+```javascript
 // goes to the next (right) slide
 carousel.next();
 
 // goes to the previous (left) slide
 carousel.prev();
-{{< /code >}}
+```
 
 Use the `slideTo(position)` public method to jump to the carousel slide item with the specified position.
 
-{{< code lang="javascript" file="carousel.js" icon="file" >}}
+```javascript
 // jumps to the 3rd position (position starts from 0)
 carousel.slideTo(2);
-{{< /code >}}
+```
 
 Use the `cycle()` method to start an automated cycling where the duration is the milliseconds of time between each slide and the `pause()` method to clear the cycle event.
 
-{{< code lang="javascript" file="carousel.js" icon="file" >}}
+```javascript
 // starts or resumes the carousel cycling (automated sliding)
 carousel.cycle();
 
 // pauses the cycling (automated sliding)
 carousel.pause();
-{{< /code >}}
+```
 
 ### HTML Markup
 
 Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the `hidden` class from Tailwind CSS to hide the carousel items by default.
 
-{{< code lang="html" file="carousel.html" icon="file" >}}
+```html
 <div id="carousel-example" class="relative w-full">
     <!-- Carousel wrapper -->
     <div
@@ -740,11 +726,11 @@ Here is an example of the HTML markup that you can use for the JavaScript exampl
         </span>
     </button>
 </div>
-{{< /code >}}
+```
 
 If you want to set trigger the next or previous slide item for the any button, just add some event listeners and call the `next()` and `prev()` methods on the Carousel object.
 
-{{< code lang="javascript" file="carousel.js" icon="file" >}}
+```javascript
 const $prevButton = document.getElementById('data-carousel-prev');
 const $nextButton = document.getElementById('data-carousel-next');
 
@@ -755,15 +741,15 @@ $prevButton.addEventListener('click', () => {
 $nextButton.addEventListener('click', () => {
     carousel.next();
 });
-{{< /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 Carousel class, parameters and its options.
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options.
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="carousel.ts" icon="file" >}}
+```typescript
 import { Carousel } from 'flowbite';
 import type {
     CarouselItem,
@@ -855,4 +841,4 @@ $prevButton.addEventListener('click', () => {
 $nextButton.addEventListener('click', () => {
     carousel.next();
 });
-{{< /code >}}
+```