npm - flowbite-mcp - Versions diffs - 1.1.3 → 1.1.5 - Mend

flowbite-mcp 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/README.md +49 -74
package/build/index.js +20 -36
package/data/components/accordion.md +39 -53
package/data/components/alerts.md +27 -44
package/data/components/avatar.md +20 -33
package/data/components/badge.md +34 -47
package/data/components/banner.md +10 -29
package/data/components/bottom-navigation.md +16 -29
package/data/components/breadcrumb.md +12 -25
package/data/components/button-group.md +26 -39
package/data/components/buttons.md +41 -67
package/data/components/card.md +34 -47
package/data/components/carousel.md +25 -39
package/data/components/chat-bubble.md +36 -50
package/data/components/clipboard.md +256 -252
package/data/components/datepicker.md +56 -70
package/data/components/device-mockups.md +16 -29
package/data/components/drawer.md +42 -56
package/data/components/dropdowns.md +66 -80
package/data/components/footer.md +16 -29
package/data/components/forms.md +32 -50
package/data/components/gallery.md +16 -33
package/data/components/indicators.md +18 -31
package/data/components/jumbotron.md +12 -25
package/data/components/kbd.md +14 -27
package/data/components/list-group.md +14 -27
package/data/components/mega-menu.md +10 -24
package/data/components/modal.md +37 -51
package/data/components/navbar.md +41 -55
package/data/components/pagination.md +22 -35
package/data/components/popover.md +36 -51
package/data/components/progress.md +10 -23
package/data/components/qr-code.md +41 -133
package/data/components/rating.md +16 -29
package/data/components/sidebar.md +15 -30
package/data/components/skeleton.md +16 -29
package/data/components/speed-dial.md +40 -55
package/data/components/spinner.md +14 -27
package/data/components/stepper.md +14 -27
package/data/components/tables.md +45 -64
package/data/components/tabs.md +30 -45
package/data/components/timeline.md +10 -23
package/data/components/toast.md +25 -39
package/data/components/tooltips.md +24 -39
package/data/components/typography.md +22 -35
package/data/components/video.md +14 -27
package/data/forms/checkbox.md +27 -43
package/data/forms/file-input.md +12 -26
package/data/forms/floating-label.md +12 -25
package/data/forms/input-field.md +17 -32
package/data/forms/number-input.md +83 -93
package/data/forms/phone-input.md +42 -54
package/data/forms/radio.md +23 -39
package/data/forms/range.md +12 -26
package/data/forms/search-input.md +14 -31
package/data/forms/select.md +15 -30
package/data/forms/textarea.md +8 -21
package/data/forms/timepicker.md +30 -42
package/data/forms/toggle.md +18 -31
package/data/plugins/charts.md +542 -526
package/data/plugins/datatables.md +285 -286
package/data/plugins/wysiwyg.md +658 -650
package/data/quickstart.md +24 -24
package/data/typography/blockquote.md +24 -37
package/data/typography/headings.md +30 -43
package/data/typography/hr.md +10 -23
package/data/typography/images.md +32 -45
package/data/typography/links.md +16 -29
package/data/typography/lists.md +22 -35
package/data/typography/paragraphs.md +30 -43
package/data/typography/text.md +42 -55
package/package.json +1 -1

package/data/quickstart.md CHANGED Viewed

@@ -8,13 +8,13 @@ Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" target="
 1. Install Flowbite as a dependency using NPM by running the following command:
-{{< code lang="bash" >}}
+```bash
 npm install flowbite
-{{< /code >}}
+```
 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:
-{{< code lang="css" icon="file" file="input.css" >}}
+```css
 /* choose one of the following */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@@ -38,25 +38,25 @@ npm install flowbite
 /* MONO THEME
 @import "flowbite/src/themes/mono";
 */
-{{< /code >}}
+```
 3. Import the Flowbite plugin file in your CSS:
-{{< code lang="css" icon="file" file="input.css" >}}
+```css
 @plugin "flowbite/plugin";
-{{< /code >}}
+```
 4. Configure the source files of Flowbite in your CSS:
-{{< code lang="css" icon="file" file="input.css" >}}
+```css
 @source "../node_modules/flowbite";
-{{< /code >}}
+```
 5. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
-{{< code lang="html" icon="file" file="index.html" >}}
+```html
 <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
-{{< /code >}}
+```
 Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).
@@ -68,15 +68,15 @@ The quickest way to get started working with Flowbite is to include the CSS and
 Require the following minified stylesheet inside the `head` tag:
-{{< code lang="html" icon="file" file="index.html" >}}
-<link href="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.css" rel="stylesheet" />
-{{< /code >}}
+```html
+<link href="https://cdn.jsdelivr.net/npm/flowbite/dist/flowbite.min.css" rel="stylesheet" />
+```
 And include the following JavaScript file before the end of the `body` element:
-{{< code lang="html" icon="file" file="index.html" >}}
-<script src="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.js"></script>
-{{< /code >}}
+```html
+<script src="https://cdn.jsdelivr.net/npm/flowbite/dist/flowbite.min.js"></script>
+```
 Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.
@@ -86,9 +86,9 @@ One of the most popular way of using Flowbite is to include the bundled Javascri
 You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:
-{{< code lang="javascript" icon="file" file="app.js" >}}
+```javascript
 import 'flowbite';
-{{< /code >}}
+```
 This file has access to all of the components and it automatically applies event listeners to the data attributes.
@@ -102,7 +102,7 @@ For example, to set up a modal component all you need to do is use `data-modal-t
 You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt:
-{{< code lang="javascript" icon="file" file="app.js" >}}
+```javascript
 <script setup>
 import { onMounted } from 'vue'
 import { initFlowbite } from 'flowbite'
@@ -116,7 +116,7 @@ onMounted(() => {
 <template>
     // Modal HTML markup with data attributes from Flowbite
 </template>
-{{< /code >}}
+```
 The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`.
@@ -128,7 +128,7 @@ Flowbite also offers an API for using the components programmatically and it sup
 Here's an example how you can import and create a new Modal component inside JavaScript:
-{{< code lang="javascript" icon="file" file="app.js" >}}
+```javascript
 import { Modal } from 'flowbite'
 const $modalElement = document.querySelector('#modalEl');
@@ -151,7 +151,7 @@ const modalOptions = {
 const modal = new Modal($modalElement, modalOptions);
 modal.show();
-{{< /code >}}
+```
 Check out the JavaScript behaviour section of each component's page to learn how you can use this.
@@ -161,9 +161,9 @@ Flowbite supports type declarations for the interactive UI components including
 Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:
-{{< code lang="javascript" icon="file" file="app.ts" >}}
+```javascript
 import { Modal } from 'flowbite'
 import type { ModalOptions, ModalInterface } from 'flowbite'
 // other code
-{{< /code >}}
+```

package/data/typography/blockquote.md CHANGED Viewed

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Blockquote - Flowbite
-description: The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article
-group: typography
-toc: true
-previous: Paragraphs
-previousLink: typography/paragraphs/
-next: Images
-nextLink: typography/images/
----
 Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
 The main `<blockquote>` HTML tag can be used together with the `<cite>` tag or attribute to also mention the source of the quote content.
@@ -19,17 +6,17 @@ The main `<blockquote>` HTML tag can be used together with the `<cite>` tag or a
 Use this example to quote an external source inside a blockquote element.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-xl italic font-semibold tracking-tight text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned pages starting from login screen to complex dashboard. Best choice for your SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ## Solid background
 This example can be used as an alternative style to the default one by applying a solid background color.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <p class="text-body">
 Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live.
 </p>
@@ -39,24 +26,24 @@ Does your user know how to exit out of screens? Can they follow your intended us
 <p class="text-body">
 First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the documentation.
 </p>
-{{< /example >}}
+```
 ## Blockquote icon
 Use this example to show an icon above the blockquote text content.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-xl italic font-semibold text-heading tracking-tight">
     <svg class="w-9 h-9 text-heading mb-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="M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ## Paragraph context
 Use this example to show a blockquote component between multiple paragraph elements.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <div class="grid grid-cols-1 md:gap-6 md:grid-cols-2">
     <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
@@ -65,13 +52,13 @@ Use this example to show a blockquote component between multiple paragraph eleme
     </blockquote>
 </div>
 <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 ## User testimonial
 This example can be used for user testimonials by mentioning the author and occupation of the author.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <figure class="max-w-screen-md mx-auto text-center">
     <svg class="w-11 h-11 text-heading mb-4 mx-auto" 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 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
     <blockquote>
@@ -85,13 +72,13 @@ This example can be used for user testimonials by mentioning the author and occu
         </div>
     </figcaption>
 </figure>
-{{< /example >}}
+```
 ## User Review
 Use this example to show a user review with rating stars and the name and occupation of the author.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <figure class="max-w-screen-md">
     <div class="flex items-center space-x-1 mb-4">
         <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>
@@ -111,7 +98,7 @@ Use this example to show a user review with rating stars and the name and occupa
         </div>
     </figcaption>
 </figure>
-{{< /example >}}
+```
 ## Alignment
@@ -121,31 +108,31 @@ Choose from the following examples the blockquote text alignment from starting f
 The default alignment of the blockquote text content is the left side of the document.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-xl italic font-semibold text-left text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ### Center
 Use the `text-center` class from Tailwind CSS to align the text content inside the blockquote to the center.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-xl italic font-semibold text-center text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ### Right
 Use the `text-right` utility class from Tailwind CSS to align the blockquote text content to the right side of the page.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-xl italic font-semibold text-right text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ## Sizes
@@ -155,28 +142,28 @@ Choose from one of the multiple sizes for the default blockquote component based
 Use the `text-lg` font size class from Tailwind CSS to apply the small size for the blockquote component.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-lg italic font-semibold text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ### Medium
 Use the `text-xl` utility class to set the default size for the blockquote element.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-xl italic font-semibold text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```
 ### Large
 The `text-2xl` class can be used to set a large size for the blockquote component.
-{{< example github="typography/blockquote.md" show_dark=true >}}
+```html
 <blockquote class="text-2xl italic font-semibold text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```

package/data/typography/headings.md CHANGED Viewed

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Headings - Flowbite
-description: The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
-group: typography
-toc: true
-previous: Floating label
-previousLink: forms/floating-label/
-next: Paragraphs
-nextLink: typography/paragraphs/
----
 Get started with the heading component to define titles and subtitles on a web page and also improve the on-page SEO metrics of your website by targeting high-traffic keywords on Google.
 At least one unique H1 tag should be available for each page on your website with the next tags starting from H2 to H6 for each section. Choose from a collection of custom heading components based on multiple styles and layouts built with the utility classes from Tailwind CSS.
@@ -19,17 +6,17 @@ At least one unique H1 tag should be available for each page on your website wit
 Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.
-{{< example class="text-center py-16" github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">We invest in the world’s potential</h1>
 <p class="mb-6 text-lg font-normal text-body lg:text-xl sm:px-16 xl:px-48">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
 <a href="#" class="inline-flex items-center 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-base px-5 py-3 focus:outline-none">Learn more</a>
-{{< /example >}}
+```
 ## Second-level heading
 Use this example of a second-level H2 heading as the main subtitle for each section of your web page.
-{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+```html
 <h2 class="text-4xl font-bold">Payments tool for companies</h2>
 <p class="my-4 text-lg text-body">Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.</p>
 <p class="mb-4 text-lg font-normal text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.</p>
@@ -37,49 +24,49 @@ Use this example of a second-level H2 heading as the main subtitle for each sect
   Read more
   <svg class="w-5 h-5 ms-1 rtl:rotate-180" 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>
-{{< /example >}}
+```
 ## Highlighted heading
 Use this example to highlight a certain portion of the heading text with a different color.
-{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">Get back to growth with <span class="text-fg-brand">the world's #1</span> CRM.</h1>
 <p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
-{{< /example >}}
+```
 ## Heading mark
 This example can be used to mark one part of the heading text with a solid background for highlighting.
-{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">Regain <mark class="px-2 pb-0.5 text-white bg-brand rounded-base">control</mark> over your days</h1>
 <p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
-{{< /example >}}
+```
 ## Heading gradient
 Use this example to highlight a portion of the heading text by using a gradient style.
-{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="mb-4 text-3xl font-bold text-heading md:text-5xl lg:text-6xl"><span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Better Data</span> Scalable AI.</h1>
 <p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
-{{< /example >}}
+```
 ## Heading underline
 Get started with this example to underline an important part of the heading component using the offset feature from Tailwind CSS.
-{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">We invest in the <span class="underline underline-offset-3 decoration-8 decoration-brand">world’s potential</span></h1>
 <p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
-{{< /example >}}
+```
 ## Breadcrumb context
 Get started with this example to position a breadcrumb component above the H1 heading component.
-{{< example class="py-8" github="typography/headings.md" show_dark=true >}}
+```html
 <nav class="flex mb-2.5" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
     <li class="inline-flex items-center">
@@ -103,23 +90,23 @@ Get started with this example to position a breadcrumb component above the H1 he
   </ol>
 </nav>
 <h2 class="text-3xl font-bold tracking-tight text-heading md:text-4xl">Team management</h2>
-{{< /example >}}
+```
 ## Badge context
 Use this example to show a badge component inside the heading text element as a secondary indicator.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="text-heading flex items-center text-5xl font-bold tracking-tight">Flowbite <span class="inline-flex ms-3 px-2 py-1 ring-1 ring-inset ring-brand-subtle text-fg-brand-strong text-sm font-medium rounded bg-brand-softer">PRO</span></h1>
-{{< /example >}}
+```
 ## Secondary text
 This example can be used to add a secondary text inside the main heading component.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="text-5xl font-bold text-heading">Flowbite<small class="ms-2 font-medium text-body">This is secondary text</small></h1>
-{{< /example >}}
+```
 ## Sizes
@@ -129,46 +116,46 @@ The heading component has six levels of importance starting from H1 which has to
 Use the H1 tag as the most important text element to indicate the title of your web page.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h1 class="text-5xl font-bold text-heading">Heading 1</h1>
-{{< /example >}}
+```
 ### Heading two (H2)
 The H2 tag can be used as subtitles of the page's sections.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h2 class="text-4xl font-bold text-heading">Heading 2</h2>
-{{< /example >}}
+```
 ### Heading three (H3)
 Use the H3 tags inside sections that already have a H2 available.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h3 class="text-3xl font-bold text-heading">Heading 3</h3>
-{{< /example >}}
+```
 ### Heading four (H4)
 The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h4 class="text-2xl font-bold text-heading">Heading 4</h4>
-{{< /example >}}
+```
 ### Heading five (H5)
 The H5 tag is most often used in longer articles with other heading already available or in sidebars.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h5 class="text-xl font-bold text-heading">Heading 5</h5>
-{{< /example >}}
+```
 ### Heading six (H6)
 Using the H6 tag is quite rare because it means that you've already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
-{{< example github="typography/headings.md" show_dark=true >}}
+```html
 <h6 class="text-lg font-bold text-heading">Heading 6</h6>
-{{< /example >}}
+```

package/data/typography/hr.md CHANGED Viewed

@@ -1,43 +1,30 @@
----
-layout: docs
-title: Tailwind CSS Horizontal Line (HR) - Flowbite
-description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS
-group: typography
-toc: true
-previous: Text
-previousLink: typography/text/
-next: Charts
-nextLink: plugins/charts/
----
 The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.
 ## Default HR
 Use this example to separate text content with a `<hr>` horizontal line.
-{{< example github="typography/hr.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <hr class="h-px my-8 bg-neutral-quaternary border-0">
 <p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 ## Trimmed
 Use this example to show a shorter version of the horizontal line.
-{{< example github="typography/hr.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <hr class="w-48 h-1 mx-auto my-4 bg-neutral-quaternary border-0 rounded-sm md:my-10">
 <p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 ## Icon HR
 This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.
-{{< example class="text-center" github="typography/hr.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <div class="inline-flex items-center justify-center w-full">
     <hr class="w-64 h-1 my-8 bg-neutral-quaternary border-0 rounded-sm">
@@ -46,29 +33,29 @@ This example can be used to set a custom [SVG icon](https://flowbite.com/icons/)
     </div>
 </div>
 <p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.</p>
-{{< /example >}}
+```
 ## HR with text
 Use this example to add a text in the middle of the HR component.
-{{< example class="text-center" github="typography/hr.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <div class="inline-flex items-center justify-center w-full">
     <hr class="w-64 h-px my-8 bg-neutral-quaternary border-0">
     <span class="absolute px-3 font-medium text-heading -translate-x-1/2 bg-neutral-primary left-1/2">or</span>
 </div>
 <p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.</p>
-{{< /example >}}
+```
 ## HR shape
 This example can be used to separate content with a HR tag as a shape instead of a line.
-{{< example github="typography/hr.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <hr class="w-8 h-8 mx-auto my-8 bg-neutral-quaternary border-0 rounded-sm md:my-12">
 <blockquote class="text-xl italic font-semibold text-center text-heading">
     <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
 </blockquote>
-{{< /example >}}
+```