flowbite-mcp 1.0.0

package/data/components/typography.md

@@ -0,0 +1,269 @@
+---
+layout: docs
+title: Tailwind CSS Typography - Flowbite
+description: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class
+group: components
+toc: true
+
+previous: Tooltips
+previousLink: components/tooltips/
+next: QR Code
+nextLink: components/qr-code/
+---
+
+Get started with the [Flowbite Typography](https://github.com/themesberg/flowbite-typography) plugin forked from the official [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin) plugin to set a custom `format` class to a wrapper element to apply styles to all inline child elements such as headings, paragraphs, images, lists, and more and apply font sizes, font weights, colors, and spacings.
+
+You can check out this [live demo](https://flowbite.com/plugins/typography/) to see how content inside an article will render like.
+
+## Getting started
+
+Make sure that you have both [Node.js](https://nodejs.org/) and [Tailwind CSS](https://tailwindcss.com/) already installed in your project.
+
+1. Install the Flowbite Typography plugin via NPM:
+
+{{< code lang="bash" >}}
+npm i -D flowbite-typography
+{{< /code >}}
+
+2. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:
+
+{{< code lang="javascript" >}}
+@plugin "flowbite-typography";
+{{< /code >}}
+
+Alternatively you can do the same but in your `tailwind.config.js` file:
+
+{{< code lang="javascript" >}}
+// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('flowbite-typography'),
+    // ...
+  ],
+}
+{{< /code >}}
+
+Now you can go ahead and use the new formatting classes from the Flowbite Typography plugin.
+
+## Basic usage
+
+Once you have installed the plugin inside your project you can add the `format` class to a wrapper element and use any type of inline elements such as headings, paragraphs, images, lists, captions, links, and tables.
+
+All of these elements will be automatically styled with proper spacing, font sizing, font weight, colors, and more based on recommended UI/UX readability and accessibility standards.
+
+{{< code lang="html" >}}
+<article class="format lg:format-lg">
+    <h1>Prototyping from A to Z: best practices for successful prototypes</h1>
+    <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
+    <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
+    <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
+    
+    ...
+
+    <h2>When does design come in handy?</h2>
+    <p>While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:</p>
+    <ol>
+        <li><strong>Usability testing</strong>. 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;</li>
+        <li><strong>Involving stakeholders</strong>. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;</li>
+        <li><strong>Impressing a client</strong>. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;</li>
+        <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
+    </ol>
+</article>
+{{< /code >}}
+
+You can also set the `lg:format-lg` class to set increase font sizes and spacings for larger viewport devices.
+
+## Link colors
+
+You can update the default blue link color to anything you'd like by setting the `format-{color}` class:
+
+{{< code lang="html" >}}
+<article class="format lg:format-lg format-red">
+    <h1>Prototyping from A to Z: best practices for successful prototypes</h1>
+    <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
+    <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
+    <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
+</article>
+{{< /code >}}
+## Dark mode
+
+Enable dark mode for the typography by using the `dark:format-invert` class on the article wrapper element:
+
+{{< code lang="html" >}}
+<article class="format lg:format-lg dark:format-invert">
+    <h1>The content inside this article will invert when switching to dark mode</h1>
+    <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
+    <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
+    <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
+    
+    ...
+
+    <h2>When does design come in handy?</h2>
+    <p>While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:</p>
+    <ol>
+        <li><strong>Usability testing</strong>. 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;</li>
+        <li><strong>Involving stakeholders</strong>. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;</li>
+        <li><strong>Impressing a client</strong>. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;</li>
+        <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
+    </ol>
+</article>
+{{< /code >}}
+
+## Max width
+
+Override the default maximum width by setting a custom `max-w-{size}` class next to the `format` class:
+
+{{< code lang="html" >}}
+<article class="max-w-none format lg:format-lg format-red">
+    <h1>Prototyping from A to Z: best practices for successful prototypes</h1>
+    <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
+    <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
+    <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
+</article>
+{{< /code >}}
+
+## Disable format
+
+If you want to disable formatting inside the typography content you can use the `not-format` class:
+
+{{< code lang="html" >}}
+<article class="format lg:format-lg dark:format-invert">
+    <h1>The content inside this article will invert when switching to dark mode</h1>
+    <p class="lead">Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.</p>
+    <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
+    <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>
+    
+    ...
+
+    <!-- content that won't have styles applied -->
+    <div class="not-format">
+        <h2>When does design come in handy?</h2>
+        <p>While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:</p>
+        <ol>
+            <li><strong>Usability testing</strong>. 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;</li>
+            <li><strong>Involving stakeholders</strong>. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;</li>
+            <li><strong>Impressing a client</strong>. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;</li>
+            <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
+        </ol>
+    </div>
+</article>
+{{< /code >}}
+
+## Options
+
+Extend the plugin's options inside the Tailwind configuration file to set your own colors, class name, and more.
+
+### Custom colors
+
+You can set your own colors by extending the typography plugin inside the `tailwind.config.js` file:
+
+{{< code lang="javascript" >}}
+module.exports = {
+  theme: {
+    extend: {
+      typography: ({ theme }) => ({
+        orange: {
+          css: {
+            '--tw-format-body': theme('colors.orange[500]'),
+            '--tw-format-headings': theme('colors.orange[900]'),
+            '--tw-format-lead': theme('colors.orange[500]'),
+            '--tw-format-links': theme('colors.orange[600]'),
+            '--tw-format-bold': theme('colors.orange[900]'),
+            '--tw-format-counters': theme('colors.orange[500]'),
+            '--tw-format-bullets': theme('colors.orange[500]'),
+            '--tw-format-hr': theme('colors.orange[200]'),
+            '--tw-format-quotes': theme('colors.orange[900]'),
+            '--tw-format-quote-borders': theme('colors.orange[300]'),
+            '--tw-format-captions': theme('colors.orange[700]'),
+            '--tw-format-code': theme('colors.orange[900]'),
+            '--tw-format-code-bg': theme('colors.orange[50]'),
+            '--tw-format-pre-code': theme('colors.orange[100]'),
+            '--tw-format-pre-bg': theme('colors.orange[900]'),
+            '--tw-format-th-borders': theme('colors.orange[300]'),
+            '--tw-format-td-borders': theme('colors.orange[200]'),
+            '--tw-format-th-bg': theme('colors.orange[50]'),
+            '--tw-format-invert-body': theme('colors.orange[200]'),
+            '--tw-format-invert-headings': theme('colors.white'),
+            '--tw-format-invert-lead': theme('colors.orange[300]'),
+            '--tw-format-invert-links': theme('colors.white'),
+            '--tw-format-invert-bold': theme('colors.white'),
+            '--tw-format-invert-counters': theme('colors.orange[400]'),
+            '--tw-format-invert-bullets': theme('colors.orange[600]'),
+            '--tw-format-invert-hr': theme('colors.orange[700]'),
+            '--tw-format-invert-quotes': theme('colors.pink[100]'),
+            '--tw-format-invert-quote-borders': theme('colors.orange[700]'),
+            '--tw-format-invert-captions': theme('colors.orange[400]'),
+            '--tw-format-invert-code': theme('colors.white'),
+            '--tw-format-invert-pre-code': theme('colors.orange[300]'),
+            '--tw-format-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+            '--tw-format-invert-th-borders': theme('colors.orange[600]'),
+            '--tw-format-invert-td-borders': theme('colors.orange[700]'),
+            '--tw-format-invert-th-bg': theme('colors.orange[700]'),
+          },
+        },
+      }),
+    },
+  },
+  plugins: [
+    require('flowbite-typography'),
+    // ...
+  ],
+}
+{{< /code >}}
+
+Now you can use the `format-red` class and apply these styles.
+
+### Wrapper class
+
+Change the default `format` class to your own choosing by updating the `tailwind.config.js` file:
+
+{{< code lang="javascript" >}}
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('flowbite-typography')({
+      className: 'custom-class',
+    }),
+  ]
+  ...
+}
+{{< /code >}}
+
+### Custom CSS
+
+You can also customize the default CSS by extending the `css` key value pair from the Tailwind configuration file:
+
+{{< code lang="javascript" >}}
+module.exports = {
+  theme: {
+    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            color: '#666',
+            a: {
+              color: '#3182ce',
+              '&:hover': {
+                color: '#2c5282',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [
+    require('flowbite-typography'),
+    // ...
+  ],
+}
+{{< /code >}}
+
+## Blog templates
+
+You can check out the following [blog template](https://flowbite.com/blocks/publisher/blog-templates/) layouts from Flowbite Blocks that use the Typography plugin.

package/data/components/video.md

@@ -0,0 +1,95 @@
+---
+layout: docs
+title: Tailwind CSS Video - Flowbite
+description: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS
+group: components
+toc: true
+
+previous: QR Code
+previousLink: components/qr-code/
+next: Input field
+nextLink: forms/input-field/
+---
+
+Get started with the video component to embed internal video source into a native HTML 5 video player and set custom options such as autoplay or muted to enhance the user experience.
+
+## Video player
+
+Use this example to create a native browser video player and apply the `w-full` utility class from Tailwind CSS to span the full width of the parent container.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="w-full rounded-base" controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}
+
+## Autoplay
+
+Use the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="w-full rounded-base" controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}
+
+## Muted
+
+Use the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="w-full rounded-base" autoplay muted controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}
+
+## Sizes
+
+Set the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS.
+
+### Width
+
+Use the `w-{size}` class to set the width of the video component.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="w-96 rounded-base" controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}
+
+### Height
+
+Use the `h-{size}` class to set the height of the video player.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="h-80 rounded-base" controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}
+
+### Responsive
+
+Use the following example to make the video responsive across all devices and viewports.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="w-full h-auto max-w-full rounded-base" controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}
+
+## Custom styles
+
+Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.
+
+{{< example github="typography/video.md" show_dark=true >}}
+<video class="w-full h-auto max-w-full border border-default rounded-base" controls>
+  <source src="/docs/videos/flowbite.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+{{< /example >}}