flowbite-mcp 1.1.3 → 1.1.5

package/data/components/stepper.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Stepper - Flowbite
-description: Use the stepper component to show the number of steps required to complete a form inside your application based on Tailwind CSS
-group: components
-toc: true
-
-previous: Spinner
-previousLink: components/spinner/
-next: Tables
-nextLink: components/tables/
----
-
 The stepper component can be used to show a numbered list of steps next to a form component to indicate the progress and number of steps that are required to complete and submit the form data.
 
 There are multiple examples that you can use including horizontal or vertical aligned stepper components, different sizes, styles, and showing icons or numbers all coded with the utility classes from Tailwind CSS.
@@ -19,7 +6,7 @@ There are multiple examples that you can use including horizontal or vertical al
 
 Use this example to show a list of form steps with a number and title of the step in a horizontal alignment.
 
-{{< example github="components/stepper.md" show_dark=true >}}
+```html
 
 <ol class="flex items-center w-full text-sm font-medium text-center text-body sm:text-base">
     <li class="flex md:w-full items-center text-fg-brand sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-default after:border-px after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10">
@@ -39,13 +26,13 @@ Use this example to show a list of form steps with a number and title of the ste
         Confirmation
     </li>
 </ol>
-{{< /example >}}
+```
 
 ## Progress stepper
 
 This example can be used to show the progress of the stepper component based only on icons and showing a checkmark when the step has been finished.
 
-{{< example github="components/stepper.md" show_dark=true >}}
+```html
 
 <ol class="flex items-center w-full space-x-4">
     <li class="flex w-full items-center text-fg-brand after:content-[''] after:w-full after:h-1 after:border-b after:border-brand-subtle after:border-4 after:inline-block after:ms-4 after:rounded-full">
@@ -64,13 +51,13 @@ This example can be used to show the progress of the stepper component based onl
         </span>
     </li>
 </ol>
-{{< /example >}}
+```
 
 ## Detailed stepper
 
 Use this example to show an extra subtitle next to the number and the title of the steppper component based on an ordered list element.
 
-{{< example github="components/stepper.md" show_dark=true >}}
+```html
 <ol class="items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0 rtl:space-x-reverse">
     <li class="flex items-center text-fg-brand space-x-3 rtl:space-x-reverse">
         <span class="flex items-center justify-center w-10 h-10 bg-brand-softer rounded-full lg:h-12 lg:w-12 shrink-0">
@@ -101,13 +88,13 @@ Use this example to show an extra subtitle next to the number and the title of t
     </li>
 </ol>
 
-{{< /example >}}
+```
 
 ## Vertical stepper
 
 This example can be used to show a list of steps aligned vertically where you can indicate the completed, currently active, and the unexplored steps.
 
-{{< example github="components/stepper.md" show_dark=true >}}
+```html
 <ol class="space-y-4 w-72">
     <li>
         <div class="w-full p-4 bg-success-soft border border-success-subtle text-fg-success-strong rounded-base" role="alert">
@@ -155,13 +142,13 @@ This example can be used to show a list of steps aligned vertically where you ca
         </div>
     </li>
 </ol>
-{{< /example >}}
+```
 
 ## Breadcrumb stepper
 
 This example can be used to show the number of steps similar to how a breadcrumb component looks like by using double chevron icons between the items.
 
-{{< example github="components/stepper.md" show_dark=true >}}
+```html
 <ol class="flex items-center w-full p-3 space-x-2 text-sm font-medium text-center text-body bg-neutral-primary-soft border border-default rounded-base shadow-xs sm:p-4 sm:space-x-4 rtl:space-x-reverse">
     <li class="flex items-center text-fg-brand">
         <span class="flex items-center justify-center w-5 h-5 me-2 text-xs border border-brand rounded-full shrink-0">
@@ -185,13 +172,13 @@ This example can be used to show the number of steps similar to how a breadcrumb
     </li>
 </ol>
 
-{{< /example >}}
+```
 
 ## Timeline stepper
 
 Use this example to show the number of steps inside a timeline component using icons, title, and subtitle for each step.
 
-{{< example github="components/stepper.md" class="p-4" show_dark=true >}}
+```html
 
 <ol class="relative text-body border-s border-default">                  
     <li class="mb-10 ms-7">            
@@ -223,13 +210,13 @@ Use this example to show the number of steps inside a timeline component using i
         <p class="text-sm">Step details here</p>
     </li>
 </ol>
-{{< /example >}}
+```
 
 ## Stepper with form
 
 Use this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.
 
-{{< example github="components/stepper.md" show_dark=true >}}
+```html
 
 <ol class="flex items-center w-full space-x-4 mb-8">
     <li class="flex w-full items-center text-fg-brand after:content-[''] after:w-full after:h-1 after:border-b after:border-brand-subtle after:border-4 after:inline-block after:ms-4 after:rounded-full">
@@ -268,4 +255,4 @@ Use this example to show the stepper component next to a form layout and change
   <button type="submit" class="text-white 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">Next Step: Payment Info</button>
 </form>
 
-{{< /example >}}
+```

package/data/components/tables.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Table - Flowbite
-description: Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells
-group: components
-toc: true
-
-previous: Stepper
-previousLink: components/stepper/
-next: Tabs
-nextLink: components/tabs/
----
-
 The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.
 
 Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.
@@ -19,7 +6,7 @@ Get started with multiple variants and styles of these table components built wi
 
 Use the following example of a responsive table component to show multiple rows and columns of text data.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -97,7 +84,7 @@ Use the following example of a responsive table component to show multiple rows
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Highlight
 
@@ -107,7 +94,7 @@ Accentuate certain elements inside the table such as the rows, columns or data c
 
 Use this example to increase the readability of the data sets by alternating the background color of every second table row.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -219,13 +206,13 @@ Use this example to increase the readability of the data sets by alternating the
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Striped columns
 
 Use this example to increase the readability of the table cells by alternating the background color of every second table column.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -319,13 +306,13 @@ Use this example to increase the readability of the table cells by alternating t
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Hover state
 
 Use the `hover:{bg-*}` utility class from Tailwind CSS to change the background color of a data row when hovering over the element with the cursor.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -403,7 +390,7 @@ Use the `hover:{bg-*}` utility class from Tailwind CSS to change the background
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Table layout
 
@@ -413,7 +400,7 @@ Use the following examples of table layouts to show the head, foot or caption of
 
 This example can be used to show the head of the table component with sortable icons.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -506,13 +493,13 @@ This example can be used to show the head of the table component with sortable i
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Table foot
 
 Use this example where the `<tfoot>` HTML element can be used in conjunction with the head and caption of the table component.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -573,13 +560,13 @@ Use this example where the `<tfoot>` HTML element can be used in conjunction wit
         </tfoot>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Table caption
 
 Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -661,7 +648,7 @@ Improve accessibility by using a caption inside the table as a heading to better
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Table styles
 
@@ -671,7 +658,7 @@ Get started with the following table styles and choose the one that best fits yo
 
 Use this example of a table component without any border between the table cells.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -737,13 +724,13 @@ Use this example of a table component without any border between the table cells
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Table with shadow
 
 Use this example to apply a shadow-sm border to the table component.
 
-{{< example github="components/tables.md" class="pb-4 overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -821,13 +808,13 @@ Use this example to apply a shadow-sm border to the table component.
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Overflow scrolling
 
 Use this example where we apply `overflow-x-auto` to enable horizontal scrolling if the content inside the table overflows that maximum width.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -1199,13 +1186,13 @@ Use this example where we apply `overflow-x-auto` to enable horizontal scrolling
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Table search
 
 Use this example to show a search bar that can be used to query through data inside the table component.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <div class="p-4">
@@ -1385,17 +1372,15 @@ Use this example to show a search bar that can be used to query through data ins
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Table filter
 
 Use this example with a filter bar to select certain data sets inside the table based on the options that you've selected.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <div class="p-4 flex items-center justify-between space-x-4">
@@ -1597,13 +1582,13 @@ Use this example with a filter bar to select certain data sets inside the table
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Table pagination
 
 Paginate the table data when using larger data sets based on any given amount of results per page.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -1892,13 +1877,13 @@ Paginate the table data when using larger data sets based on any given amount of
         </ul>
     </nav>
 </div>
-{{< /example >}}
+```
 
 ## Checkbox selection
 
 Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -2069,17 +2054,15 @@ Checkboxes can be used inside table data rows to select multiple data sets and a
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Table with users
 
 Use this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <div class="flex items-center justify-between flex-column flex-wrap md:flex-row space-y-4 md:space-y-0 p-4">
@@ -2271,13 +2254,13 @@ Use this example of a table where we show a data set of users and showing a prof
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Table with products
 
 Get started with this example to show a list of products inside the table and show a preview image, product name, quantity selector, price and actions tab.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -2388,17 +2371,15 @@ Get started with this example to show a list of products inside the table and sh
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Table with modal
 
 Use this example to show a modal with a form where you can edit table data by clicking on one of the rows.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true iframeHeight="640" >}}
+```html
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <div class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 p-4">
         <div>
@@ -2643,13 +2624,13 @@ Use this example to show a modal with a form where you can edit table data by cl
     </div>
 </div> 
 </div>
-{{< /example >}}
+```
 
 ## Table colors
 
 Apply any color to the table element by using the `bg-{color}` and `text-{color}` color class variants from Tailwind CSS.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
@@ -2761,13 +2742,13 @@ Apply any color to the table element by using the `bg-{color}` and `text-{color}
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Striped rows color
 
 Use this example to apply a different color to every second row inside the table.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
@@ -2879,13 +2860,13 @@ Use this example to apply a different color to every second row inside the table
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Striped columns color
 
 Use this example to apply a different color to every second column inside a colored table.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
@@ -2997,13 +2978,13 @@ Use this example to apply a different color to every second column inside a colo
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ### Hover state
 
 Use this example to apply a different color to every second row inside the table with a colored background.
 
-{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
     <table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
@@ -3115,7 +3096,7 @@ Use this example to apply a different color to every second row inside the table
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## More examples