diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index be90f3cb82d..aa06a7ead40 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 2.35
 
+- [Flowbite] Add Flowbite v4 kit
 - [Shadcn] Add `toggle` recipe
 - [Shadcn] Use `html_attr_type` filter from `twig/html-extra:^3.24` for composable trigger attributes
 - [Shadcn] Rename `trigger_attrs` to `alert_dialog_trigger_attrs` in `AlertDialog:Trigger`
diff --git a/src/Toolkit/kits/flowbite-4/INSTALL.md b/src/Toolkit/kits/flowbite-4/INSTALL.md
new file mode 100644
index 00000000000..803c7402b11
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/INSTALL.md
@@ -0,0 +1,277 @@
+# Getting started
+
+This kit provides ready-to-use and fully-customizable UI Twig components based on [Flowbite](https://flowbite.com/) components's **design**.
+
+Please note that not every Flowbite component is available in this kit, but we are working on it!
+
+## Requirements
+
+This kit requires TailwindCSS and Flowbite v4 to work:
+
+### TailwindCSS
+
+- If you use Symfony AssetMapper, you can install TailwindCSS with the [TailwindBundle](https://symfony.com/bundles/TailwindBundle/current/index.html),
+- If you use Webpack Encore, you can follow the [TailwindCSS installation guide for Symfony](https://tailwindcss.com/docs/installation/framework-guides/symfony)
+
+## Installation
+
+1. Install Flowbite, either with `importmap:require` for AssetMapper, or `npm` for Webpack Encore:
+
+```
+# With AssetMapper
+php bin/console importmap:require flowbite
+
+# With npm
+npm install flowbite
+```
+
+2. Modify the file `assets/styles/app.css` with the following content:
+
+```css
+@import 'tailwindcss';
+
+/* With AssetMapper... */
+@source "../vendor/flowbite";
+/* ... or with Webpack Encore */
+/* @source "../../node_modules/flowbite"; */
+
+@custom-variant dark (&:is(.dark *));
+
+/* You can customize theming here see https://flowbite.com/docs/customize/theming/ */
+@theme {
+    --font-sans:
+        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
+        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-body:
+        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
+        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-mono:
+        'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
+
+    /* TEXT VARIABLES */
+    --text-2xs: 0.625rem;
+    --spacing-8xl: 90rem;
+    --leading-9: 36px; /* rem pls */
+    --leading-7: 28px;
+    --leading-8: 32px;
+    --leading-6: 24px;
+    --leading-4: 16px;
+    --leading-none: 1px;
+    --leading-5: 20px;
+    --tracking-tighter: -0.8px;
+    --leading-heading-none: 60px;
+    --tracking-tight: -0.4px;
+
+    /* BORDER RADIUS VARIABLES */
+    --radius-0: 0px;
+    --radius-xxs: 2px;
+    --radius-xs: 4px;
+    --radius-sm: 6px;
+    --radius: 8px;
+    --radius-base: 12px;
+    --radius-lg: 16px;
+
+    /* BORDER WIDTH VARIABLES */
+    --default-border-width: 1px;
+
+    /* TEXT COLORS VARIABLES */
+    /* main text color */
+    --color-body: var(--color-gray-600);
+    --color-body-subtle: var(--color-gray-500);
+
+    /* text heading colors */
+    --color-heading: var(--color-gray-900);
+
+    /* used for custom brand colors */
+    --color-fg-brand-subtle: var(--color-blue-200);
+    --color-fg-brand: var(--color-blue-700);
+    --color-fg-brand-strong: var(--color-blue-900);
+
+    /* used for status colors */
+    --color-fg-success: var(--color-emerald-700);
+    --color-fg-success-strong: var(--color-emerald-900);
+    --color-fg-danger: var(--color-rose-700);
+    --color-fg-danger-strong: var(--color-rose-900);
+    --color-fg-warning-subtle: var(--color-orange-600);
+    --color-fg-warning: var(--color-orange-900);
+    --color-fg-yellow: var(--color-yellow-400);
+    --color-fg-disabled: var(--color-gray-400);
+    --color-fg-purple: var(--color-purple-600);
+    --color-fg-cyan: var(--color-cyan-600);
+    --color-fg-indigo: var(--color-indigo-600);
+    --color-fg-pink: var(--color-pink-600);
+    --color-fg-lime: var(--color-lime-600);
+
+    /* BACKGROUND COLOR VARIABLES */
+    /* used for neutral colors */
+    --color-neutral-primary-soft: var(--color-white);
+    --color-neutral-primary: var(--color-white);
+    --color-neutral-primary-medium: var(--color-white);
+    --color-neutral-primary-strong: var(--color-white);
+    --color-neutral-secondary-soft: var(--color-gray-50);
+    --color-neutral-secondary: var(--color-gray-50);
+    --color-neutral-secondary-medium: var(--color-gray-50);
+    --color-neutral-secondary-strong: var(--color-gray-50);
+    --color-neutral-secondary-strongest: var(--color-gray-50);
+    --color-neutral-tertiary-soft: var(--color-gray-100);
+    --color-neutral-tertiary: var(--color-gray-100);
+    --color-neutral-tertiary-medium: var(--color-gray-100);
+    --color-neutral-quaternary: var(--color-gray-200);
+    --color-neutral-quaternary-medium: var(--color-gray-200);
+    --color-gray: var(--color-gray-300);
+
+    /* used for brand colors */
+    --color-brand-softer: var(--color-blue-50);
+    --color-brand-soft: var(--color-blue-100);
+    --color-brand: var(--color-blue-700);
+    --color-brand-medium: var(--color-blue-200);
+    --color-brand-strong: var(--color-blue-800);
+
+    /* used for status colors */
+    --color-success-soft: var(--color-emerald-50);
+    --color-success: var(--color-emerald-700);
+    --color-success-medium: var(--color-emerald-100);
+    --color-success-strong: var(--color-emerald-800);
+    --color-danger-soft: var(--color-rose-50);
+    --color-danger: var(--color-rose-700);
+    --color-danger-medium: var(--color-rose-100);
+    --color-danger-strong: var(--color-rose-800);
+    --color-warning-soft: var(--color-orange-50);
+    --color-warning: var(--color-orange-500);
+    --color-warning-medium: var(--color-orange-100);
+    --color-warning-strong: var(--color-orange-700);
+    --color-dark-soft: var(--color-gray-800);
+    --color-dark: var(--color-gray-800);
+    --color-dark-strong: var(--color-gray-900);
+    --color-disabled: var(--color-gray-100);
+    --color-purple: var(--color-purple-500);
+    --color-sky: var(--color-sky-500);
+    --color-teal: var(--color-teal-600);
+    --color-pink: var(--color-pink-600);
+    --color-cyan: var(--color-cyan-500);
+    --color-fuchsia: var(--color-fuchsia-600);
+    --color-indigo: var(--color-indigo-600);
+    --color-orange: var(--color-orange-400);
+
+    /* BORDER COLOR VARIABLES */
+    --color-buffer: var(--color-white);
+    --color-buffer-medium: var(--color-white);
+    --color-buffer-strong: var(--color-white);
+    --color-muted: var(--color-gray-50);
+    --color-light-subtle: var(--color-gray-100);
+    --color-light: var(--color-gray-100);
+    --color-light-medium: var(--color-gray-100);
+    --color-default-subtle: var(--color-gray-200);
+    --color-default: var(--color-gray-200);
+    --color-default-medium: var(--color-gray-200);
+    --color-default-strong: var(--color-gray-200);
+
+    /* used for status colors */
+    --color-success-subtle: var(--color-emerald-200);
+    --color-danger-subtle: var(--color-rose-200);
+    --color-warning-subtle: var(--color-orange-200);
+    --color-brand-subtle: var(--color-blue-200);
+    --color-brand-light: var(--color-blue-600);
+    --color-dark-subtle: var(--color-gray-800);
+    --color-dark-backdrop: var(--color-gray-950);
+
+    /* shiki variables */
+    --color-shiki-fg-brand: #79b8ff;
+    --color-shiki-fg-brand-subtle: #9ecbff;
+}
+
+.dark {
+    /* text color variables */
+    --color-body: var(--color-gray-400);
+    --color-body-subtle: var(--color-gray-400);
+    --color-heading: var(--color-white);
+    --color-fg-brand-subtle: var(--color-blue-200);
+    --color-fg-brand: var(--color-blue-500);
+    --color-fg-brand-strong: var(--color-blue-400);
+    --color-fg-success: var(--color-emerald-600);
+    --color-fg-success-strong: var(--color-emerald-300);
+    --color-fg-danger: var(--color-rose-500);
+    --color-fg-danger-strong: var(--color-rose-300);
+    --color-fg-warning-subtle: var(--color-orange-500);
+    --color-fg-warning: var(--color-orange-300);
+    --color-fg-yellow: var(--color-yellow-400);
+    --color-fg-disabled: var(--color-gray-600);
+    --color-fg-purple: var(--color-purple-500);
+    --color-fg-cyan: var(--color-cyan-500);
+    --color-fg-indigo: var(--color-indigo-500);
+    --color-fg-pink: var(--color-pink-500);
+    --color-fg-lime: var(--color-lime-500);
+
+    /* background color variables */
+    --color-neutral-primary-soft: var(--color-gray-900);
+    --color-neutral-primary: var(--color-gray-950);
+    --color-neutral-primary-medium: var(--color-gray-800);
+    --color-neutral-primary-strong: var(--color-gray-700);
+    --color-neutral-secondary-soft: var(--color-gray-900);
+    --color-neutral-secondary: var(--color-gray-950);
+    --color-neutral-secondary-medium: var(--color-gray-800);
+    --color-neutral-secondary-strong: var(--color-gray-700);
+    --color-neutral-secondary-strongest: var(--color-gray-600);
+    --color-neutral-tertiary-soft: var(--color-gray-900);
+    --color-neutral-tertiary: var(--color-gray-800);
+    --color-neutral-tertiary-medium: var(--color-gray-700);
+    --color-neutral-quaternary: var(--color-gray-700);
+    --color-neutral-quaternary-medium: var(--color-gray-600);
+    --color-gray: var(--color-gray-600);
+    --color-brand-softer: var(--color-blue-950);
+    --color-brand-soft: var(--color-blue-900);
+    --color-brand: var(--color-blue-600);
+    --color-brand-medium: var(--color-blue-900);
+    --color-brand-strong: var(--color-blue-700);
+    --color-success-soft: var(--color-emerald-950);
+    --color-success: var(--color-emerald-600);
+    --color-success-medium: var(--color-emerald-900);
+    --color-success-strong: var(--color-emerald-700);
+    --color-danger-soft: var(--color-rose-950);
+    --color-danger: var(--color-rose-700);
+    --color-danger-medium: var(--color-rose-900);
+    --color-danger-strong: var(--color-rose-800);
+    --color-warning-soft: var(--color-orange-950);
+    --color-warning: var(--color-orange-600);
+    --color-warning-medium: var(--color-orange-900);
+    --color-warning-strong: var(--color-orange-700);
+    --color-dark-soft: var(--color-gray-700);
+    --color-dark: var(--color-gray-800);
+    --color-dark-strong: var(--color-gray-700);
+    --color-disabled: var(--color-gray-800);
+    --color-purple: var(--color-purple-500);
+    --color-sky: var(--color-sky-500);
+    --color-teal: var(--color-teal-500);
+    --color-pink: var(--color-pink-500);
+    --color-cyan: var(--color-cyan-500);
+    --color-fuchsia: var(--color-fuchsia-500);
+    --color-indigo: var(--color-indigo-500);
+    --color-orange: var(--color-orange-400);
+
+    /* border color variables */
+    --color-buffer: var(--color-gray-950);
+    --color-buffer-medium: var(--color-gray-900);
+    --color-buffer-strong: var(--color-gray-800);
+    --color-muted: var(--color-gray-900);
+    --color-light-subtle: var(--color-gray-900);
+    --color-light: var(--color-gray-800);
+    --color-light-medium: var(--color-gray-700);
+    --color-default-subtle: var(--color-gray-900);
+    --color-default: var(--color-gray-800);
+    --color-default-medium: var(--color-gray-700);
+    --color-default-strong: var(--color-gray-600);
+    --color-success-subtle: var(--color-emerald-900);
+    --color-danger-subtle: var(--color-rose-900);
+    --color-warning-subtle: var(--color-orange-900);
+    --color-brand-subtle: var(--color-blue-900);
+    --color-brand-light: var(--color-blue-600);
+    --color-dark-subtle: var(--color-gray-700);
+    --color-dark-backdrop: var(--color-gray-950);
+}
+```
+
+3. Modify your `assets/app.js` file by adding:
+
+```js
+import 'flowbite';
+```
diff --git a/src/Toolkit/kits/flowbite-4/alert/assets/controllers/alert_controller.js b/src/Toolkit/kits/flowbite-4/alert/assets/controllers/alert_controller.js
new file mode 100644
index 00000000000..9d8f5e6fb05
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/assets/controllers/alert_controller.js
@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+import { Dismiss } from 'flowbite';
+
+export default class extends Controller {
+    alert = null;
+    static targets = ['alert'];
+
+    connect() {
+        this.alert = new Dismiss(this.alertTarget);
+    }
+
+    close() {
+        this.alert.hide();
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/Accent.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/Accent.html.twig
new file mode 100644
index 00000000000..0560616a6e9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/Accent.html.twig
@@ -0,0 +1,46 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/Action.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/Action.html.twig
new file mode 100644
index 00000000000..1630b32c6b5
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/Action.html.twig
@@ -0,0 +1,15 @@
+<twig:Alert class="max-w-xl">
+    <twig:block name="icon">
+        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+    </twig:block>
+    <twig:Alert:Title>This is an info alert</twig:Alert:Title>
+    <twig:Alert:Description>
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+    </twig:Alert:Description>
+    <twig:Alert:Action>
+        <twig:Button size="sm">
+            <twig:ux:icon name="flowbite:eye-outline" class="size-3.5 me-1.5" aria-hidden="true" />
+            View more
+        </twig:Button>
+    </twig:Alert:Action>
+</twig:Alert>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/Border.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/Border.html.twig
new file mode 100644
index 00000000000..fcd3dcaa6b9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/Border.html.twig
@@ -0,0 +1,46 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/Demo.html.twig
new file mode 100644
index 00000000000..d8073bd6430
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/Demo.html.twig
@@ -0,0 +1,31 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/Dismissing.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/Dismissing.html.twig
new file mode 100644
index 00000000000..681baf88e31
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/Dismissing.html.twig
@@ -0,0 +1,46 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple info alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple danger alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple success alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple warning alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple dark alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/Usage.html.twig
new file mode 100644
index 00000000000..05993851df9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/Usage.html.twig
@@ -0,0 +1,15 @@
+<twig:Alert
+    variant="brand | danger | success | warning | dark"
+    border=" none | bordered | accent"
+>
+    <twig:block name="icon">
+        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+    </twig:block>
+    <twig:Alert:Title>Info alert!</twig:Alert:Title>
+    <twig:Alert:Description>
+        You can add components to your app using the cli.
+    </twig:Alert:Description>
+    <twig:Alert:Action>
+        <twig:Button size="sm">Enable</twig:Button>
+    </twig:Alert:Action>
+</twig:Alert>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/With Icon.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/With Icon.html.twig
new file mode 100644
index 00000000000..bc23a0a050e
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/With Icon.html.twig	
@@ -0,0 +1,46 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/examples/With List.html.twig b/src/Toolkit/kits/flowbite-4/alert/examples/With List.html.twig
new file mode 100644
index 00000000000..863794c38f2
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/examples/With List.html.twig	
@@ -0,0 +1,52 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert variant="success">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
+        <twig:Alert:Description>
+            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </twig:Alert:Description>
+        <twig:Alert:Action>
+            <a href="#">See recommendation here</a>
+        </twig:Alert:Action>
+    </twig:Alert>
+
+    <twig:Alert variant="warning">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
+        <twig:Alert:Description>
+            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </twig:Alert:Description>
+        <twig:Alert:Action>
+            <a href="#">See recommendation here</a>
+        </twig:Alert:Action>
+    </twig:Alert>
+
+    <twig:Alert variant="danger">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
+        <twig:Alert:Description>
+            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </twig:Alert:Description>
+        <twig:Alert:Action>
+            <a href="#">See recommendation here</a>
+        </twig:Alert:Action>
+    </twig:Alert>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/manifest.json b/src/Toolkit/kits/flowbite-4/alert/manifest.json
new file mode 100644
index 00000000000..19618eff6f3
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Alert",
+    "description": "The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert.html.twig b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert.html.twig
new file mode 100644
index 00000000000..ffc3666f262
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert.html.twig
@@ -0,0 +1,44 @@
+{# @prop variant 'brand'|'danger'|'success'|'warning'|'dark' The visual style variant. Defaults to `brand` #}
+{# @prop border 'none'|'bordered'|'accent' The visual border style. Defaults to `none` #}
+{# @prop dismissible boolean Whether the alert can be dismissible. Defaults to `false` #}
+{# @block content The alert content, typically includes `Alert:Title` and `Alert:Description` #}
+{# @block icon The alert icon, typically includes `twig:ux:icon` #}
+{%- props variant = 'brand', border = 'none', dismissible = false -%}
+{%- set style = html_cva(
+    base: "flex gap-2 text-sm p-4 rounded-base border-transparent *:[svg:not([class*='size-'])]:size-4 [&_a]:hover:no-underline [&_a]:underline group/alert",
+    variants: {
+        border: {
+            none: '',
+            bordered: 'border',
+            accent: 'border-t-4',
+        },
+        variant: {
+            brand: 'text-fg-brand-strong bg-brand-softer border-brand-subtle',
+            danger: 'text-fg-danger-strong bg-danger-soft border-danger-subtle',
+            success: 'text-fg-success-strong bg-success-soft border-success-subtle',
+            warning: 'text-fg-warning bg-warning-soft border-warning-subtle',
+            dark: 'text-heading bg-neutral-secondary-medium border-default-medium',
+        },
+    },
+) -%}
+
+<div
+    role="alert"
+    class="{{ style.apply({variant: variant, border: border}, attributes.render('class'))|tailwind_merge }}"
+    {% if dismissible %}
+    data-controller="alert"
+    data-alert-target="alert"
+    {% endif %}
+    {{ attributes }}
+>
+    {%- block icon %}{% endblock -%}
+    <div>
+        {%- block content %}{% endblock -%}
+    </div>
+    {% if dismissible %}
+        <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click->alert#close" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <twig:ux:icon name="flowbite:close-outline" class="size-4" />
+        </button>
+    {% endif %}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Action.html.twig b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Action.html.twig
new file mode 100644
index 00000000000..9f6fe51bc6f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Action.html.twig
@@ -0,0 +1,7 @@
+{# @block content The action element, typically a button or link #}
+<div
+    class="{{ ('mt-2 group-has-[>svg]/alert:col-start-2  ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Description.html.twig b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Description.html.twig
new file mode 100644
index 00000000000..13c57208e0f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Description.html.twig
@@ -0,0 +1,7 @@
+{# @block content The descriptive text of the alert #}
+<div
+    class="{{ (' ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Title.html.twig b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Title.html.twig
new file mode 100644
index 00000000000..7e9b6ced030
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Title.html.twig
@@ -0,0 +1,7 @@
+{# @block content The title text of the alert #}
+<div
+    class="{{ ('font-medium group-has-[>svg]/alert:col-start-2 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig
new file mode 100644
index 00000000000..09cf184ee06
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig	
@@ -0,0 +1,8 @@
+<div class="flex justify-center gap-4">
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="brand" border="bordered">Brand</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="alternative" border="bordered">Alternative</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="gray" border="bordered">Gray</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="danger" border="bordered">Danger</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="success" border="bordered">Success</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="warning" border="bordered">Warning</twig:Badge>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig
new file mode 100644
index 00000000000..657b3864f0f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig
@@ -0,0 +1,8 @@
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" border="bordered">Brand</twig:Badge>
+    <twig:Badge variant="alternative" border="bordered">Alternative</twig:Badge>
+    <twig:Badge variant="gray" border="bordered">Gray</twig:Badge>
+    <twig:Badge variant="danger" border="bordered">Danger</twig:Badge>
+    <twig:Badge variant="success" border="bordered">Success</twig:Badge>
+    <twig:Badge variant="warning" border="bordered">Warning</twig:Badge>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig
new file mode 100644
index 00000000000..590201f97bb
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig
@@ -0,0 +1,8 @@
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand">Brand</twig:Badge>
+    <twig:Badge variant="alternative">Alternative</twig:Badge>
+    <twig:Badge variant="gray">Gray</twig:Badge>
+    <twig:Badge variant="danger">Danger</twig:Badge>
+    <twig:Badge variant="success">Success</twig:Badge>
+    <twig:Badge variant="warning">Warning</twig:Badge>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig
new file mode 100644
index 00000000000..da5f9a879b3
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig
@@ -0,0 +1,8 @@
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="alternative" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="gray" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="danger" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="success" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="warning" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig
new file mode 100644
index 00000000000..1822797ad23
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig
@@ -0,0 +1,8 @@
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" size="lg">Brand</twig:Badge>
+    <twig:Badge variant="alternative" size="lg">Alternative</twig:Badge>
+    <twig:Badge variant="gray" size="lg">Gray</twig:Badge>
+    <twig:Badge variant="danger" size="lg">Danger</twig:Badge>
+    <twig:Badge variant="success" size="lg">Success</twig:Badge>
+    <twig:Badge variant="warning" size="lg">Warning</twig:Badge>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig
new file mode 100644
index 00000000000..5472965bbcd
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig
@@ -0,0 +1,8 @@
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" shape="pill">Brand</twig:Badge>
+    <twig:Badge variant="alternative" shape="pill">Alternative</twig:Badge>
+    <twig:Badge variant="gray" shape="pill">Gray</twig:Badge>
+    <twig:Badge variant="danger" shape="pill">Danger</twig:Badge>
+    <twig:Badge variant="success" shape="pill">Success</twig:Badge>
+    <twig:Badge variant="warning" shape="pill">Warning</twig:Badge>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig
new file mode 100644
index 00000000000..09c568b62e7
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig
@@ -0,0 +1,8 @@
+<twig:Badge
+    variant="brand | alternative | gray | danger | success | warning"
+    size="default | lg"
+    shape="rounded | pill"
+    border="none | bordered"
+>
+    Badge
+</twig:Badge>
diff --git a/src/Toolkit/kits/flowbite-4/badge/manifest.json b/src/Toolkit/kits/flowbite-4/badge/manifest.json
new file mode 100644
index 00000000000..c8b186f0618
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Badge",
+    "description": "The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig b/src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig
new file mode 100644
index 00000000000..b68d4045159
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig
@@ -0,0 +1,39 @@
+{# @prop variant 'brand'|'alternative'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #}
+{# @prop size 'default'|'lg' The badge size. Defaults to `default` #}
+{# @prop shape 'rounded'|'pill' The badge shape. Defaults to `rounded` #}
+{# @prop border 'none'|'bordered' The badge border. Defaults to `none` #}
+{# @prop as 'div' The HTML tag to render. Defaults to `div` #}
+{# @block content The badge label or content #}
+{%- props variant = 'brand', size = 'default', shape = 'rounded', border = 'none', as = 'div' -%}
+{%- set style = html_cva(
+    base: 'inline-flex items-center justify-center font-medium',
+    variants: {
+        variant: {
+            brand: 'bg-brand-softer text-fg-brand-strong border-brand-subtle [a&]:hover:bg-brand-soft',
+            alternative: 'bg-neutral-primary-soft text-heading border-default [a&]:hover:bg-neutral-secondary-medium',
+            gray: 'bg-neutral-secondary-medium text-heading border-default-medium [a&]:hover:bg-neutral-tertiary-medium',
+            danger: 'bg-danger-soft text-fg-danger-strong border-danger-subtle [a&]:hover:bg-danger-medium',
+            success: 'bg-success-soft text-fg-success-strong border-success-subtle [a&]:hover:bg-success-medium',
+            warning: 'bg-warning-soft text-fg-warning border-warning-subtle [a&]:hover:bg-warning-medium',
+        },
+        size: {
+            default: 'px-1.5 py-0.5 text-xs',
+            lg: 'px-2 py-1 text-sm',
+        },
+        shape: {
+            rounded: 'rounded',
+            pill: 'rounded-full',
+        },
+        border: {
+            none: '',
+            bordered: 'border',
+        },
+    },
+
+) -%}
+<{{ as }}
+    class="{{ style.apply({variant: variant, size: size, shape: shape, border: border}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</{{ as }}>
diff --git a/src/Toolkit/kits/flowbite-4/button-group/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/button-group/examples/Demo.html.twig
new file mode 100644
index 00000000000..a1bfd4a57f8
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button-group/examples/Demo.html.twig
@@ -0,0 +1,5 @@
+<twig:ButtonGroup>
+    <twig:Button variant="tertiary" size="sm">Profile</twig:Button>
+    <twig:Button variant="tertiary" size="sm">Settings</twig:Button>
+    <twig:Button variant="tertiary" size="sm">Messages</twig:Button>
+</twig:ButtonGroup>
diff --git a/src/Toolkit/kits/flowbite-4/button-group/examples/Orientation.html.twig b/src/Toolkit/kits/flowbite-4/button-group/examples/Orientation.html.twig
new file mode 100644
index 00000000000..ebe69154962
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button-group/examples/Orientation.html.twig
@@ -0,0 +1,5 @@
+<twig:ButtonGroup orientation="vertical" class="w-56">
+    <twig:Button variant="tertiary">Profile</twig:Button>
+    <twig:Button variant="tertiary">Settings</twig:Button>
+    <twig:Button variant="tertiary">Messages</twig:Button>
+</twig:ButtonGroup>
diff --git a/src/Toolkit/kits/flowbite-4/button-group/examples/Size.html.twig b/src/Toolkit/kits/flowbite-4/button-group/examples/Size.html.twig
new file mode 100644
index 00000000000..f1e69bfd65e
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button-group/examples/Size.html.twig
@@ -0,0 +1,17 @@
+<div class="flex flex-col items-start gap-8">
+    <twig:ButtonGroup>
+        <twig:Button variant="tertiary" size="sm">Small</twig:Button>
+        <twig:Button variant="tertiary" size="sm">Button</twig:Button>
+        <twig:Button variant="tertiary" size="sm">Group</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="tertiary">Default</twig:Button>
+        <twig:Button variant="tertiary">Button</twig:Button>
+        <twig:Button variant="tertiary">Group</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="tertiary" size="lg">Large</twig:Button>
+        <twig:Button variant="tertiary" size="lg">Button</twig:Button>
+        <twig:Button variant="tertiary" size="lg">Group</twig:Button>
+    </twig:ButtonGroup>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button-group/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/button-group/examples/Usage.html.twig
new file mode 100644
index 00000000000..c1168ac38a5
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button-group/examples/Usage.html.twig
@@ -0,0 +1,4 @@
+<twig:ButtonGroup>
+    <twig:Button variant="tertiary">One</twig:Button>
+    <twig:Button variant="tertiary">Two</twig:Button>
+</twig:ButtonGroup>
diff --git a/src/Toolkit/kits/flowbite-4/button-group/manifest.json b/src/Toolkit/kits/flowbite-4/button-group/manifest.json
new file mode 100644
index 00000000000..3b3646f278f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button-group/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Button Group",
+    "description": "The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/button-group/templates/components/ButtonGroup.html.twig b/src/Toolkit/kits/flowbite-4/button-group/templates/components/ButtonGroup.html.twig
new file mode 100644
index 00000000000..b7f4c4606cb
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button-group/templates/components/ButtonGroup.html.twig
@@ -0,0 +1,21 @@
+{# @prop orientation 'horizontal'|'vertical' The layout direction of the button group. Defaults to `horizontal` #}
+{# @block content The grouped buttons and/or separators #}
+{%- props orientation = 'horizontal' -%}
+{%- set style = html_cva(
+    base: 'inline-flex rounded-base shadow-xs -space-x-px [&>*]:rounded-none',
+    variants: {
+        orientation: {
+            horizontal: '[&>*:first-child]:rounded-s-base [&>*:last-child]:rounded-e-base',
+            vertical: 'flex-col [&>*:first-child]:rounded-t-base [&>*:last-child]:rounded-b-base',
+        },
+    },
+) -%}
+
+<div
+    role="group"
+    data-orientation="{{ orientation }}"
+    class="{{ style.apply({orientation: orientation}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig
new file mode 100644
index 00000000000..d830883c85a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig
@@ -0,0 +1,10 @@
+<div class="space-x-2 space-y-2">
+    <twig:Button>Default</twig:Button>
+    <twig:Button variant="secondary">Secondary</twig:Button>
+    <twig:Button variant="tertiary">Tertiary</twig:Button>
+    <twig:Button variant="success">Success</twig:Button>
+    <twig:Button variant="danger">Danger</twig:Button>
+    <twig:Button variant="warning">Warning</twig:Button>
+    <twig:Button variant="dark">Dark</twig:Button>
+    <twig:Button variant="ghost">Ghost</twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig
new file mode 100644
index 00000000000..b428c6d9b5d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig
@@ -0,0 +1,31 @@
+<div class="space-x-2 space-y-2">
+    <twig:Button size="icon-xs">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon-sm">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon-xs" variant="outline">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon-sm" variant="outline">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon" variant="outline">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig
new file mode 100644
index 00000000000..a4ca1c46ae7
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig
@@ -0,0 +1,6 @@
+<div class="space-x-2 space-y-2">
+    <twig:Button>
+        <twig:Spinner class="me-2" />
+        Loading...
+    </twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig
new file mode 100644
index 00000000000..e74333cdffd
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig
@@ -0,0 +1,7 @@
+<div class="space-x-2 space-y-2">
+    <twig:Button variant="outline">Outline</twig:Button>
+    <twig:Button variant="outline-brand">Brand</twig:Button>
+    <twig:Button variant="outline-success">Success</twig:Button>
+    <twig:Button variant="outline-danger">Danger</twig:Button>
+    <twig:Button variant="outline-warning">Warning</twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig
new file mode 100644
index 00000000000..201f746e650
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig
@@ -0,0 +1,10 @@
+<div class="space-x-2 space-y-2">
+    <twig:Button shape="pill">Default</twig:Button>
+    <twig:Button shape="pill" variant="secondary">Secondary</twig:Button>
+    <twig:Button shape="pill" variant="tertiary">Tertiary</twig:Button>
+    <twig:Button shape="pill" variant="success">Success</twig:Button>
+    <twig:Button shape="pill" variant="danger">Danger</twig:Button>
+    <twig:Button shape="pill" variant="warning">Warning</twig:Button>
+    <twig:Button shape="pill" variant="dark">Dark</twig:Button>
+    <twig:Button shape="pill" variant="ghost">Ghost</twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig
new file mode 100644
index 00000000000..3d152c7a344
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig
@@ -0,0 +1,7 @@
+<div class="space-x-2 space-y-2">
+    <twig:Button size="xs">Extra small</twig:Button>
+    <twig:Button size="sm">Small</twig:Button>
+    <twig:Button size="default">Base</twig:Button>
+    <twig:Button size="lg">Large</twig:Button>
+    <twig:Button size="xl">Extra large</twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig
new file mode 100644
index 00000000000..6d48bd418a0
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig
@@ -0,0 +1,7 @@
+<twig:Button
+    variant="brand | secondary | tertiary | success | danger | warning | dark | ghost | outline | outline-brand | outline-success | outline-danger | outline-warning"
+    size="default | xs | sm | lg | xl | icon | icon-xs | icon-sm"
+    shape="rounded | pill"
+>
+    Button
+</twig:Button>
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig
new file mode 100644
index 00000000000..461dd8c7c22
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig	
@@ -0,0 +1,11 @@
+<div class="flex items-center space-x-2">
+    <twig:Button>
+        <twig:ux:icon name="flowbite:cart-outline" class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true"/>
+        Buy now
+    </twig:Button>
+
+    <twig:Button>
+        Choose plan
+        <twig:ux:icon name="flowbite:arrow-right-outline"  class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
+    </twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/button/manifest.json b/src/Toolkit/kits/flowbite-4/button/manifest.json
new file mode 100644
index 00000000000..ffdb2de18fe
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Button",
+    "description": "Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig b/src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig
new file mode 100644
index 00000000000..7a40789e1f2
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig
@@ -0,0 +1,46 @@
+{# @prop variant 'brand'|'secondary'|'tertiary'|'success'|'danger'|'warning'|'dark'|'ghost'|'outline'|'outline-brand'|'outline-success'|'outline-danger'|'outline-warning' The visual style variant. Defaults to `brand` #}
+{# @prop size 'default'|'xs'|'sm'|'lg'|'xl'|'icon'|'icon-xs'|'icon-sm' The button size. Defaults to `default` #}
+{# @prop shape 'rounded'|'pill' The badge shape. Defaults to `rounded` #}
+{# @prop as 'button' The HTML tag to render. Defaults to `button` #}
+{# @block content The button label and/or icon #}
+{%- props variant = 'brand', size = 'default', shape = 'rounded', as = 'button' -%}
+{%- set style = html_cva(
+    base: 'inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs',
+    variants: {
+        variant: {
+            brand: 'text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium',
+            secondary: 'text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary',
+            tertiary: 'text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft',
+            success: 'text-white bg-success hover:bg-success-strong focus:ring-success-medium',
+            danger: 'text-white bg-danger hover:bg-danger-strong focus:ring-danger-medium',
+            warning: 'text-white bg-warning hover:bg-warning-strong focus:ring-warning-medium',
+            dark: 'text-white bg-dark hover:bg-dark-strong focus:ring-neutral-tertiary',
+            ghost: 'text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none',
+            outline: 'text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary',
+            'outline-brand': 'text-fg-brand bg-neutral-primary border-brand hover:bg-brand hover:text-white focus:ring-brand-subtle',
+            'outline-success': 'text-success bg-neutral-primary border-success hover:bg-success hover:text-white focus:ring-neutral-tertiary',
+            'outline-danger': 'text-danger bg-neutral-primary border-danger hover:bg-danger hover:text-white focus:ring-neutral-tertiary',
+            'outline-warning': 'text-warning bg-neutral-primary border-warning hover:bg-warning hover:text-white focus:ring-neutral-tertiary',
+        },
+        size: {
+            default: 'leading-5 text-sm px-4 py-2.5',
+            xs: 'leading-5 text-xs px-3 py-1.5',
+            sm: 'leading-5 text-sm px-3 py-2',
+            lg: 'text-base px-5 py-3',
+            xl: 'text-base px-6 py-3.5',
+            icon: 'w-10 h-10',
+            'icon-xs': 'w-8 h-8',
+            'icon-sm': 'w-9 h-9',
+        },
+        shape: {
+            rounded: 'rounded-base',
+            pill: 'rounded-full',
+        },
+    },
+) -%}
+<{{ as }}
+    class="{{ style.apply({variant: variant, size: size, shape: shape}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</{{ as }}>
diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig
new file mode 100644
index 00000000000..533becb5d82
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig
@@ -0,0 +1,9 @@
+<twig:Card class="max-w-sm">
+    <twig:Card:Header>
+        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </twig:Card:Content>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Form.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Form.html.twig
new file mode 100644
index 00000000000..80d67cbf83d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/examples/Form.html.twig
@@ -0,0 +1,33 @@
+<twig:Card class="w-full max-w-sm">
+    <twig:Card:Header>
+        <twig:Card:Title as="h5">Sign in to our platform</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <div class="mb-4">
+            <twig:Label for="email" class="mb-2.5">Your email</twig:Label>
+            <twig:Input type="email" id="email" placeholder="example@company.com" required />
+        </div>
+
+        <div>
+            <twig:Label for="password" class="mb-2.5">Your password</twig:Label>
+            <twig:Input type="password" id="password" placeholder="•••••••••" required />
+        </div>
+
+        <div class="flex items-start mt-6">
+            <div class="flex items-center">
+                <twig:Checkbox id="checkbox-remember" value="" />
+                <twig:Label for="checkbox-remember" class="ms-2">Remember me</twig:Label>
+            </div>
+            <a href="#" class="ms-auto text-sm font-medium text-fg-brand hover:underline">Lost Password?</a>
+        </div>
+    </twig:Card:Content>
+
+    <twig:Card:Footer>
+        <twig:Button type="submit" class="w-full mb-3">
+            Login to your account
+        </twig:Button>
+
+        <div class="text-sm font-medium text-body">Not registered? <a href="#" class="text-fg-brand hover:underline">Create account</a></div>
+    </twig:Card:Footer>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig
new file mode 100644
index 00000000000..bc3736d29bc
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig
@@ -0,0 +1,11 @@
+<twig:Card>
+    <twig:Card:Header>
+        <twig:Card:Title>Card Title</twig:Card:Title>
+    </twig:Card:Header>
+    <twig:Card:Content>
+        <p>Card Content</p>
+    </twig:Card:Content>
+    <twig:Card:Footer>
+        <p>Card Footer</p>
+    </twig:Card:Footer>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/card/examples/With Button.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/With Button.html.twig
new file mode 100644
index 00000000000..de21ed7c722
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/examples/With Button.html.twig	
@@ -0,0 +1,16 @@
+<twig:Card class="max-w-sm">
+    <twig:Card:Header>
+        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </twig:Card:Content>
+
+    <twig:Card:Footer>
+        <twig:Button as="a" href="#">
+            Read more
+            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
+        </twig:Button>
+    </twig:Card:Footer>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig
new file mode 100644
index 00000000000..66b5388a8b5
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig	
@@ -0,0 +1,28 @@
+<twig:Card class="max-w-sm">
+    <twig:Card:Header>
+        <a href="#">
+            <img
+                class="rounded-base"
+                src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+                alt="Bukchon Hanok Village by Y K" />
+        </a>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <twig:Badge border="bordered" class="mb-2">
+            <twig:ux:icon name="flowbite:fire-outline" class="w-3 h-3 me-1" aria-hidden="true"/>
+            Trending
+        </twig:Badge>
+        <a href="#">
+            <twig:Card:Title class="mb-2" as="h5">Streamlining your design process today.</twig:Card:Title>
+        </a>
+        <p>In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.</p>
+    </twig:Card:Content>
+
+    <twig:Card:Footer>
+        <twig:Button variant="secondary" as="a" href="#">
+            Read more
+            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
+        </twig:Button>
+    </twig:Card:Footer>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/card/manifest.json b/src/Toolkit/kits/flowbite-4/card/manifest.json
new file mode 100644
index 00000000000..3e02e76ad64
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Card",
+    "description": "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.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig
new file mode 100644
index 00000000000..e609763ccfd
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig
@@ -0,0 +1,7 @@
+{# @block content The card content, typically includes `Card:Content` with `Card:Header`, and/or `Card:Footer` #}
+<div
+    class="{{ ('bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig
new file mode 100644
index 00000000000..c67b25219a9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig
@@ -0,0 +1,6 @@
+{# @block content The main content area of the card #}
+<div
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig
new file mode 100644
index 00000000000..f3a25e80f19
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig
@@ -0,0 +1,7 @@
+{# @block content The footer area, typically contains actions or additional information #}
+<div
+    class="{{ ('pt-6 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig
new file mode 100644
index 00000000000..28edf6cfec6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig
@@ -0,0 +1,7 @@
+{# @block content The header area, typically contains `Card:Title` #}
+<div
+    class="{{ ('pb-6 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig
new file mode 100644
index 00000000000..33c00121c39
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig
@@ -0,0 +1,8 @@
+{# @block content The title text of the card #}
+{%- props as = 'span' -%}
+<{{ as }}
+    class="{{ ('text-2xl font-semibold tracking-tight text-heading leading-8 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</{{ as }}>
diff --git a/src/Toolkit/kits/flowbite-4/checkbox/examples/Bordered.html.twig b/src/Toolkit/kits/flowbite-4/checkbox/examples/Bordered.html.twig
new file mode 100644
index 00000000000..2c8bb34b73f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/checkbox/examples/Bordered.html.twig
@@ -0,0 +1,24 @@
+<div class="grid gap-6 md:grid-cols-2">
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
+                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
+            </div>
+            <twig:Checkbox id="default" class="mt-4 me-4"/>
+        </twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
+                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
+            </div>
+            <twig:Checkbox id="checked" class="mt-4 me-4" checked/>
+        </twig:Label>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/checkbox/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/checkbox/examples/Demo.html.twig
new file mode 100644
index 00000000000..c099990bc70
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/checkbox/examples/Demo.html.twig
@@ -0,0 +1,11 @@
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="default"/>
+        <twig:Label for="default" class="select-none ms-2 font-medium">Default checkbox</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="checked" checked/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/checkbox/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/checkbox/examples/Disabled.html.twig
new file mode 100644
index 00000000000..c8b200815dd
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/checkbox/examples/Disabled.html.twig
@@ -0,0 +1,11 @@
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="default" disabled/>
+        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default checkbox</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="checked" checked disabled/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/checkbox/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/checkbox/examples/Usage.html.twig
new file mode 100644
index 00000000000..2706386bc5a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/checkbox/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Checkbox />
diff --git a/src/Toolkit/kits/flowbite-4/checkbox/manifest.json b/src/Toolkit/kits/flowbite-4/checkbox/manifest.json
new file mode 100644
index 00000000000..68400ec4d3d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/checkbox/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Checkbox",
+    "description": "The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/checkbox/templates/components/Checkbox.html.twig b/src/Toolkit/kits/flowbite-4/checkbox/templates/components/Checkbox.html.twig
new file mode 100644
index 00000000000..728984dca2e
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/checkbox/templates/components/Checkbox.html.twig
@@ -0,0 +1,5 @@
+<input
+    type="checkbox"
+    class="{{ ('w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
diff --git a/src/Toolkit/kits/flowbite-4/indicator/examples/Count.html.twig b/src/Toolkit/kits/flowbite-4/indicator/examples/Count.html.twig
new file mode 100644
index 00000000000..cd58c446688
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/indicator/examples/Count.html.twig
@@ -0,0 +1,6 @@
+<twig:Button class="relative">
+    <twig:ux:icon name="flowbite:inbox-full-outline" class="size-4 me-1.5 -ms-0.5" aria-hidden="true" />
+    <span class="sr-only">Notifications</span>
+    Messages
+    <twig:Indicator variant="danger" size="lg" class="absolute -top-2 -end-2 border-2 border-buffer">8</twig:Indicator>
+</twig:Button>
diff --git a/src/Toolkit/kits/flowbite-4/indicator/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/indicator/examples/Demo.html.twig
new file mode 100644
index 00000000000..e05cd25e0b3
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/indicator/examples/Demo.html.twig
@@ -0,0 +1,7 @@
+<div class="flex justify-center gap-4">
+    <twig:Indicator variant="brand" />
+    <twig:Indicator variant="gray" />
+    <twig:Indicator variant="danger" />
+    <twig:Indicator variant="success" />
+    <twig:Indicator variant="warning" />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/indicator/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/indicator/examples/Usage.html.twig
new file mode 100644
index 00000000000..04e764fd609
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/indicator/examples/Usage.html.twig
@@ -0,0 +1,5 @@
+<twig:Indicator
+    variant="brand | gray | danger | success | warning"
+>
+    Value
+</twig:Indicator>
diff --git a/src/Toolkit/kits/flowbite-4/indicator/manifest.json b/src/Toolkit/kits/flowbite-4/indicator/manifest.json
new file mode 100644
index 00000000000..6daff1d581d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/indicator/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Indicator",
+    "description": "Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/indicator/templates/components/Indicator.html.twig b/src/Toolkit/kits/flowbite-4/indicator/templates/components/Indicator.html.twig
new file mode 100644
index 00000000000..ff11b33a3d8
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/indicator/templates/components/Indicator.html.twig
@@ -0,0 +1,27 @@
+{# @prop variant 'brand'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #}
+{# @prop size 'default'|'lg' The badge size. Defaults to `default` #}
+{# @block content The value #}
+{%- props variant = 'brand', size = 'default' -%}
+{%- set style = html_cva(
+    base: 'inline-flex items-center justify-center text-xs font-bold rounded-full',
+    variants: {
+        variant: {
+            brand: 'bg-brand text-white',
+            gray: 'bg-neutral-quaternary text-heading',
+            danger: 'bg-danger text-white',
+            success: 'bg-success text-white',
+            warning: 'bg-warning text-white',
+        },
+        size: {
+            default: 'size-3',
+            lg: 'size-6',
+        },
+    },
+
+) -%}
+<span
+    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</span>
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig
new file mode 100644
index 00000000000..28b9b2a9391
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig
@@ -0,0 +1,41 @@
+<form>
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+        <div>
+            <twig:Label for="first_name">First name</twig:Label>
+            <twig:Input id="first_name" type="text" placeholder="John" required />
+        </div>
+        <div>
+            <twig:Label for="last_name">Last name</twig:Label>
+            <twig:Input id="last_name" type="text" placeholder="Doe" required />
+        </div>
+        <div>
+            <twig:Label for="company">Company</twig:Label>
+            <twig:Input id="company" type="text" placeholder="Flowbite" required />
+        </div>
+        <div>
+            <twig:Label for="phone">Phone number</twig:Label>
+            <twig:Input id="phone" type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required />
+        </div>
+        <div>
+            <twig:Label for="website">Website URL</twig:Label>
+            <twig:Input id="website" type="url" placeholder="flowbite.com" required />
+        </div>
+        <div>
+            <twig:Label for="visitors">Unique visitors (per month)</twig:Label>
+            <twig:Input id="visitors" type="number" required />
+        </div>
+    </div>
+    <div class="mb-6">
+        <twig:Label for="email">Email address</twig:Label>
+        <twig:Input type="email" id="email" placeholder="john.doe@company.com" required />
+    </div>
+    <div class="mb-6">
+        <twig:Label for="password">Password</twig:Label>
+        <twig:Input type="password" id="password" placeholder="•••••••••" required />
+    </div>
+    <div class="mb-6">
+        <twig:Label for="confirm_password">Confirm password</twig:Label>
+        <twig:Input type="password" id="confirm_password" placeholder="•••••••••" required />
+    </div>
+    <twig:Button type="submit">Submit</twig:Button>
+</form>
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig
new file mode 100644
index 00000000000..85a463dcceb
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig
@@ -0,0 +1,4 @@
+<div class="space-y-6">
+    <twig:Input type="text" value="Disabled input" disabled class="max-w-sm" />
+    <twig:Input type="text" value="Disabled readonly input" disabled readonly class="max-w-sm" />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/File.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/File.html.twig
new file mode 100644
index 00000000000..a752a557d32
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/examples/File.html.twig
@@ -0,0 +1,4 @@
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="picture">Picture</twig:Label>
+    <twig:Input type="file" id="picture" />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig
new file mode 100644
index 00000000000..2c2b332d52b
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig
@@ -0,0 +1,5 @@
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="text" variant="invalid">Your name</twig:Label>
+    <twig:Input type="text" id="text" aria-invalid="true" placeholder="Error input" />
+    <p class="text-sm text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig
new file mode 100644
index 00000000000..a5b5550ecc4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Input />
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig
new file mode 100644
index 00000000000..36c01c5f8c1
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig	
@@ -0,0 +1,7 @@
+<div class="relative inline-flex">
+    <twig:Input type="text" id="text" placeholder="Search..." class="rounded-e-none" />
+    <twig:Button type="button" size="sm" class="rounded-s-0">
+        <twig:ux:icon name="tabler:search" class="size-4 me-1" aria-hidden="true" />
+        Search
+    </twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/input/manifest.json b/src/Toolkit/kits/flowbite-4/input/manifest.json
new file mode 100644
index 00000000000..6e5336f2cd9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Input",
+    "description": "The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig b/src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig
new file mode 100644
index 00000000000..25e6aa4f85a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig
@@ -0,0 +1,4 @@
+<input
+    class="{{ ('bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
diff --git a/src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig b/src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig
new file mode 100644
index 00000000000..ed0e80fdc91
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig
@@ -0,0 +1,21 @@
+<div>
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-up-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key up</span>
+    </twig:Kbd>
+
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-down-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key down</span>
+    </twig:Kbd>
+
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-left-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key left</span>
+    </twig:Kbd>
+
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-right-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key right</span>
+    </twig:Kbd>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig
new file mode 100644
index 00000000000..5d4302c347e
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig
@@ -0,0 +1,9 @@
+<div>
+    <twig:Kbd>Shift</twig:Kbd>
+    <twig:Kbd>Ctrl</twig:Kbd>
+    <twig:Kbd>Tab</twig:Kbd>
+    <twig:Kbd>Caps Lock</twig:Kbd>
+    <twig:Kbd>Esc</twig:Kbd>
+    <twig:Kbd>Spacebar</twig:Kbd>
+    <twig:Kbd>Enter</twig:Kbd>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig
new file mode 100644
index 00000000000..88328847b98
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Kbd>Ctrl</twig:Kbd>
diff --git a/src/Toolkit/kits/flowbite-4/kbd/manifest.json b/src/Toolkit/kits/flowbite-4/kbd/manifest.json
new file mode 100644
index 00000000000..c07773ad3ab
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/kbd/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Kbd",
+    "description": "The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig b/src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig
new file mode 100644
index 00000000000..d376aedd604
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig
@@ -0,0 +1,7 @@
+{# @block content The keyboard key text (e.g., "Ctrl", "⌘", "Enter") #}
+<kbd
+    class="{{ ('inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</kbd>
diff --git a/src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig
new file mode 100644
index 00000000000..ed679e5f098
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig
@@ -0,0 +1,4 @@
+<div>
+    <twig:Label for="text">Company</twig:Label>
+    <twig:Input id="text" type="text" />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig
new file mode 100644
index 00000000000..f9ac4ab3356
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Label for="email">Your email address</twig:Label>
diff --git a/src/Toolkit/kits/flowbite-4/label/manifest.json b/src/Toolkit/kits/flowbite-4/label/manifest.json
new file mode 100644
index 00000000000..bda0ceecaea
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/label/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Label",
+    "description": "A text element that identifies form controls and other content.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig b/src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig
new file mode 100644
index 00000000000..96c51a8ec76
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig
@@ -0,0 +1,18 @@
+{# @prop variant 'default'|'invalid' The visual style variant. Defaults to `default` #}
+{# @block content The label text for a form control #}
+{%- props variant = 'default' -%}
+{%- set style = html_cva(
+    base: 'block text-sm font-medium',
+    variants: {
+        variant: {
+            default: 'text-heading',
+            invalid: 'text-fg-danger-strong',
+        },
+    },
+) -%}
+<label
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</label>
diff --git a/src/Toolkit/kits/flowbite-4/manifest.json b/src/Toolkit/kits/flowbite-4/manifest.json
new file mode 100644
index 00000000000..ae6268622b4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/manifest.json
@@ -0,0 +1,7 @@
+{
+    "$schema": "../../schema-kit-v1.json",
+    "name": "Flowbite v4",
+    "description": "Component based on the Flowbite (v4) library, popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.",
+    "license": "MIT",
+    "homepage": "https://ux.symfony.com/toolkit/kits/flowbite"
+}
diff --git a/src/Toolkit/kits/flowbite-4/modal/assets/controllers/modal_controller.js b/src/Toolkit/kits/flowbite-4/modal/assets/controllers/modal_controller.js
new file mode 100644
index 00000000000..4c5066f0eb9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/assets/controllers/modal_controller.js
@@ -0,0 +1,61 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['trigger', 'modal'];
+
+    static values = {
+        open: Boolean,
+    };
+
+    connect() {
+        if (this.openValue) {
+            this.open();
+        }
+    }
+
+    open() {
+        this.modalTarget.showModal();
+
+        if (this.hasTriggerTarget) {
+            if (this.modalTarget.getAnimations().length > 0) {
+                this.modalTarget.addEventListener(
+                    'transitionend',
+                    () => {
+                        this.triggerTarget.setAttribute('aria-expanded', 'true');
+                        this.modalTarget.setAttribute('aria-hidden', 'false');
+                    },
+                    { once: true }
+                );
+            } else {
+                this.triggerTarget.setAttribute('aria-expanded', 'true');
+                this.modalTarget.setAttribute('aria-hidden', 'false');
+            }
+        }
+    }
+
+    closeOnClickOutside({ target }) {
+        if (target === this.modalTarget) {
+            this.close();
+        }
+    }
+
+    close() {
+        this.modalTarget.close();
+
+        if (this.hasTriggerTarget) {
+            if (this.modalTarget.getAnimations().length > 0) {
+                this.modalTarget.addEventListener(
+                    'transitionend',
+                    () => {
+                        this.triggerTarget.setAttribute('aria-expanded', 'false');
+                        this.modalTarget.setAttribute('aria-hidden', 'true');
+                    },
+                    { once: true }
+                );
+            } else {
+                this.triggerTarget.setAttribute('aria-expanded', 'false');
+                this.modalTarget.setAttribute('aria-hidden', 'true');
+            }
+        }
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/modal/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/modal/examples/Demo.html.twig
new file mode 100644
index 00000000000..5464f5e8bc8
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/examples/Demo.html.twig
@@ -0,0 +1,27 @@
+<twig:Modal id="delete_account">
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content>
+        <twig:Modal:Header>
+            <twig:Modal:Title>Edit profile</twig:Modal:Title>
+        </twig:Modal:Header>
+
+        <twig:Modal:Body>
+            <p class="leading-relaxed text-body">
+                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+            </p>
+            <p class="leading-relaxed text-body">
+                The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+            </p>
+        </twig:Modal:Body>
+
+        <twig:Modal:Footer>
+            <twig:Button type="submit">I accept</twig:Button>
+            <twig:Modal:Close>
+                <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
+            </twig:Modal:Close>
+        </twig:Modal:Footer>
+    </twig:Modal:Content>
+</twig:Modal>
diff --git a/src/Toolkit/kits/flowbite-4/modal/examples/Opened by default.html.twig b/src/Toolkit/kits/flowbite-4/modal/examples/Opened by default.html.twig
new file mode 100644
index 00000000000..12ba6b97426
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/examples/Opened by default.html.twig	
@@ -0,0 +1,27 @@
+<twig:Modal id="delete_account" open>
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content>
+        <twig:Modal:Header>
+            <twig:Modal:Title>Edit profile</twig:Modal:Title>
+        </twig:Modal:Header>
+
+        <twig:Modal:Body>
+            <p class="leading-relaxed text-body">
+                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+            </p>
+            <p class="leading-relaxed text-body">
+                The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+            </p>
+        </twig:Modal:Body>
+
+        <twig:Modal:Footer>
+            <twig:Button type="submit">I accept</twig:Button>
+            <twig:Modal:Close>
+                <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
+            </twig:Modal:Close>
+        </twig:Modal:Footer>
+    </twig:Modal:Content>
+</twig:Modal>
diff --git a/src/Toolkit/kits/flowbite-4/modal/examples/Popup.html.twig b/src/Toolkit/kits/flowbite-4/modal/examples/Popup.html.twig
new file mode 100644
index 00000000000..546c32848b4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/examples/Popup.html.twig
@@ -0,0 +1,25 @@
+<twig:Modal id="share_link">
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline-danger" {{ ...modal_trigger_attrs }}>Delete</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content class="sm:max-w-md" :showCloseButton="false">
+
+        <twig:Modal:Body class="text-center">
+            <twig:ux:icon name="flowbite:exclamation-circle-outline" class="mx-auto size-12 text-fg-disabled" aria-hidden="true" />
+            <twig:Modal:Title>Are you sure you want to delete this product from your account?</twig:Modal:Title>
+            <div class="flex items-center space-x-4 justify-center">
+                <twig:Button variant="danger">
+                    Yes, I'm sure
+                </twig:Button>
+
+                <twig:Modal:Close>
+                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>
+                        No, cancel
+                    </twig:Button>
+                </twig:Modal:Close>
+            </div>
+        </twig:Modal:Body>
+
+    </twig:Modal:Content>
+</twig:Modal>
diff --git a/src/Toolkit/kits/flowbite-4/modal/examples/Static.html.twig b/src/Toolkit/kits/flowbite-4/modal/examples/Static.html.twig
new file mode 100644
index 00000000000..f53b15c7d34
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/examples/Static.html.twig
@@ -0,0 +1,24 @@
+<twig:Modal id="delete_account">
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content class="max-w-[600px]" backdrop="static">
+        <twig:Modal:Header>
+            <twig:Modal:Title>Edit profile</twig:Modal:Title>
+        </twig:Modal:Header>
+
+        <twig:Modal:Body>
+            <p class="leading-relaxed text-body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat, velit sit amet interdum auctor, ligula lorem posuere urna, ut lobortis odio odio et leo. Nam scelerisque vel sem vel pulvinar.
+            </p>
+        </twig:Modal:Body>
+
+        <twig:Modal:Footer>
+            <twig:Button type="submit">I accept</twig:Button>
+            <twig:Modal:Close>
+                <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
+            </twig:Modal:Close>
+        </twig:Modal:Footer>
+    </twig:Modal:Content>
+</twig:Modal>
diff --git a/src/Toolkit/kits/flowbite-4/modal/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/modal/examples/Usage.html.twig
new file mode 100644
index 00000000000..3d9381f984d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/examples/Usage.html.twig
@@ -0,0 +1,10 @@
+<twig:Modal id="delete_account">
+    <twig:Modal:Trigger>
+        <twig:Button {{ ...modal_trigger_attrs }}>Open</twig:Button>
+    </twig:Modal:Trigger>
+    <twig:Modal:Content>
+        <twig:Modal:Header>
+            <twig:Modal:Title>Are you absolutely sure?</twig:Modal:Title>
+        </twig:Modal:Header>
+    </twig:Modal:Content>
+</twig:Modal>
diff --git a/src/Toolkit/kits/flowbite-4/modal/manifest.json b/src/Toolkit/kits/flowbite-4/modal/manifest.json
new file mode 100644
index 00000000000..e6751906e2b
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/manifest.json
@@ -0,0 +1,18 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Modal",
+    "description": "Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles",
+    "copy-files": {
+        "assets/": "assets/",
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": [
+            "symfony/ux-icons",
+            "twig/extra-bundle",
+            "twig/html-extra:^3.24.0",
+            "tales-from-a-dev/twig-tailwind-extra:^1.0.0"
+        ]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal.html.twig
new file mode 100644
index 00000000000..3ff1169721e
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal.html.twig
@@ -0,0 +1,14 @@
+{# @prop open boolean Whether the modal is open on initial render. Defaults to `false` #}
+{# @prop id string Unique identifier used to generate internal Modal IDs #}
+{# @block content The modal structure, typically includes `Modal:Trigger` and `Modal:Content` #}
+{%- props open = false, id -%}
+
+{%- set _modal_id = 'modal-' ~ id -%}
+{%- set _modal_title_id = _modal_id ~ '-title' -%}
+<div {{ attributes.defaults({
+    'data-controller': 'modal',
+    'data-modal-open-value': open,
+    'aria-labelledby': _modal_title_id,
+}) }}>
+    {% block content %}{% endblock %}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Body.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Body.html.twig
new file mode 100644
index 00000000000..958fc50da96
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Body.html.twig
@@ -0,0 +1,7 @@
+{# @block content The main content area of the moda #}
+<div
+    class="{{ ('space-y-4 md:space-y-6 py-4 md:py-6 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Close.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Close.html.twig
new file mode 100644
index 00000000000..5373acea466
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Close.html.twig
@@ -0,0 +1,5 @@
+{# @block content The close trigger element (e.g., a `Button`) that closes the modal when clicked #}
+{%- set modal_close_attrs = {
+    'data-action': 'click->modal#close',
+} -%}
+{%- block content %}{% endblock -%}
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Content.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Content.html.twig
new file mode 100644
index 00000000000..944f7c63a00
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Content.html.twig
@@ -0,0 +1,21 @@
+{# @prop showCloseButton boolean Whether to display the close button in the top-right corner. Defaults to `true` #}
+{# @prop backdrop 'dynamic'|'static' To prevent the modal from closing when clicking outside. Defaults to `dynamic` #}
+{# @block content The modal content, typically includes `Modal:Header` and optionally `Modal:Footer` #}
+{%- props showCloseButton = true, backdrop = 'dynamic' -%}
+
+<dialog
+    id="{{ _modal_id }}"
+    tabindex="-1"
+    aria-hidden="true"
+    class="{{ ('relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70 ' ~ attributes.render('class'))|tailwind_merge }}"
+    data-modal-target="modal"
+    data-action="keydown.esc->modal#close:prevent {{ backdrop is not same as('static') ? 'click->modal#closeOnClickOutside' }}"
+>
+    {%- block content %}{% endblock -%}
+    {% if showCloseButton %}
+        <twig:Button type="button" variant="ghost" size="icon-xs" class="absolute top-4 right-4" data-action="click->modal#close">
+            <twig:ux:icon name="flowbite:close-outline" class="size-4" />
+            <span class="sr-only">Close</span>
+        </twig:Button>
+    {% endif %}
+</dialog>
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Footer.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Footer.html.twig
new file mode 100644
index 00000000000..8eff6e8c41d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Footer.html.twig
@@ -0,0 +1,7 @@
+{# @block content The footer area, typically contains action buttons #}
+<footer
+    class="{{ ('flex items-center border-t border-default space-x-4 pt-4 md:pt-5 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</footer>
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Header.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Header.html.twig
new file mode 100644
index 00000000000..799958603a5
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Header.html.twig
@@ -0,0 +1,7 @@
+{# @block content The header area, typically contains `Modal:Title` and `Modal:Description` #}
+<header
+    class="{{ ('flex items-center justify-between border-b border-default pb-4 md:pb-5 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</header>
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Title.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Title.html.twig
new file mode 100644
index 00000000000..d4929e12ea4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Title.html.twig
@@ -0,0 +1,8 @@
+{# @block content The title text of the modal #}
+<h3
+    id="{{ _modal_title_id }}"
+    class="{{ ('text-lg font-medium text-heading ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.without('id') }}
+>
+    {%- block content %}{% endblock -%}
+</h3>
diff --git a/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Trigger.html.twig b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Trigger.html.twig
new file mode 100644
index 00000000000..2fbf0efd7b0
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Trigger.html.twig
@@ -0,0 +1,7 @@
+{# @block content The trigger element (e.g., a `Button`) that opens the modal when clicked #}
+{%- set modal_trigger_attrs = {
+    'data-action': 'click->modal#open'|html_attr_type('sst'),
+    'data-modal-target': 'trigger',
+    'aria-haspopup': 'dialog',
+} -%}
+{%- block content %}{% endblock -%}
diff --git a/src/Toolkit/kits/flowbite-4/pagination/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/pagination/examples/Demo.html.twig
new file mode 100644
index 00000000000..f6c8c0fb40a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/examples/Demo.html.twig
@@ -0,0 +1,19 @@
+<twig:Pagination>
+    <twig:Pagination:Content>
+        <twig:Pagination:Item>
+            <twig:Pagination:Previous href="#" />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Next href="#" />
+        </twig:Pagination:Item>
+    </twig:Pagination:Content>
+</twig:Pagination>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/examples/Icon.html.twig b/src/Toolkit/kits/flowbite-4/pagination/examples/Icon.html.twig
new file mode 100644
index 00000000000..3a1cc4967cb
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/examples/Icon.html.twig
@@ -0,0 +1,19 @@
+<twig:Pagination>
+    <twig:Pagination:Content>
+        <twig:Pagination:Item>
+            <twig:Pagination:Previous asIcon href="#" />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Next asIcon href="#" />
+        </twig:Pagination:Item>
+    </twig:Pagination:Content>
+</twig:Pagination>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/pagination/examples/Usage.html.twig
new file mode 100644
index 00000000000..f6c8c0fb40a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/examples/Usage.html.twig
@@ -0,0 +1,19 @@
+<twig:Pagination>
+    <twig:Pagination:Content>
+        <twig:Pagination:Item>
+            <twig:Pagination:Previous href="#" />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Next href="#" />
+        </twig:Pagination:Item>
+    </twig:Pagination:Content>
+</twig:Pagination>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/manifest.json b/src/Toolkit/kits/flowbite-4/pagination/manifest.json
new file mode 100644
index 00000000000..d12ae7ab94f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Pagination",
+    "description": "Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination.html.twig b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination.html.twig
new file mode 100644
index 00000000000..9ba626bb73d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination.html.twig
@@ -0,0 +1,8 @@
+{# @block content The pagination structure, typically a `Pagination:Content` #}
+<nav
+    class="{{ ('flex items-center space-x-4 ' ~ attributes.render('class'))|tailwind_merge }}"
+    role="navigation"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</nav>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Content.html.twig b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Content.html.twig
new file mode 100644
index 00000000000..a66b802eacc
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Content.html.twig
@@ -0,0 +1,7 @@
+{# @block content The pagination items, typically multiple `Pagination:Item` components #}
+<ul
+    class="{{ ('flex -space-x-px text-sm rounded-base [&_a]:h-10 [&_*]:rounded-none [&>*:first-child]:[&_*]:rounded-s-base [&>*:last-child]:[&_*]:rounded-e-base ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</ul>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Item.html.twig b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Item.html.twig
new file mode 100644
index 00000000000..ad88201b67d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Item.html.twig
@@ -0,0 +1,4 @@
+{# @block content The pagination item content, typically a `Pagination:Link` #}
+<li{{ attributes }}>
+    {%- block content %}{% endblock -%}
+</li>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Link.html.twig b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Link.html.twig
new file mode 100644
index 00000000000..0ebc7eaf1b8
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Link.html.twig
@@ -0,0 +1,15 @@
+{# @prop active boolean Whether this is the current page. Defaults to `false` #}
+{# @block content The page number or navigation icon #}
+{%- props active = false -%}
+<twig:Button
+    as="a"
+    variant="secondary"
+    shape="rounded"
+    size="icon"
+    aria-current="{{ active ? 'page' : false }}"
+    href="#"
+    class="{{ active ? 'text-fg-brand bg-neutral-tertiary-medium' : '' }}"
+    {{ ...attributes.without('class') }}
+>
+    {{- block(outerBlocks.content) -}}
+</twig:Button>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Next.html.twig b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Next.html.twig
new file mode 100644
index 00000000000..fd4639a1932
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Next.html.twig
@@ -0,0 +1,13 @@
+{% props asIcon = false %}
+
+<twig:Pagination:Link
+    aria-label="Go to next page"
+    size="{{ asIcon ? 'icon' : 'default' }}"
+    {{ ...attributes }}
+>
+    {% if asIcon %}
+        <twig:ux:icon name="flowbite:chevron-right-outline" class="size-4" />
+    {% else %}
+        <span>Next</span>
+    {% endif %}
+</twig:Pagination:Link>
diff --git a/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Previous.html.twig b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Previous.html.twig
new file mode 100644
index 00000000000..d29d6a53ea4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Previous.html.twig
@@ -0,0 +1,13 @@
+{% props asIcon = false %}
+
+<twig:Pagination:Link
+    aria-label="Go to previous page"
+    size="{{ asIcon ? 'icon' : 'default' }}"
+    {{ ...attributes }}
+>
+    {% if asIcon %}
+        <twig:ux:icon name="flowbite:chevron-left-outline" class="size-4" />
+    {% else %}
+        <span>Previous</span>
+    {% endif %}
+</twig:Pagination:Link>
diff --git a/src/Toolkit/kits/flowbite-4/radio/examples/Bordered.html.twig b/src/Toolkit/kits/flowbite-4/radio/examples/Bordered.html.twig
new file mode 100644
index 00000000000..efe0d0ae8f9
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/radio/examples/Bordered.html.twig
@@ -0,0 +1,24 @@
+<div class="grid gap-6 md:grid-cols-2">
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
+                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
+            </div>
+            <twig:Radio id="default" value="default" class="mt-4 me-4" name="radio-bordered"/>
+        </twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
+                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
+            </div>
+            <twig:Radio id="checked" value="checked" class="mt-4 me-4" name="radio-bordered" checked/>
+        </twig:Label>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/radio/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/radio/examples/Demo.html.twig
new file mode 100644
index 00000000000..d86dc4f562a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/radio/examples/Demo.html.twig
@@ -0,0 +1,11 @@
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Radio id="default" value="" name="radio-default"/>
+        <twig:Label for="default" class="select-none ms-2 font-medium">Default radio</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Radio id="checked" value="" name="radio-default" checked/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/radio/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/radio/examples/Disabled.html.twig
new file mode 100644
index 00000000000..c3db37426e1
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/radio/examples/Disabled.html.twig
@@ -0,0 +1,11 @@
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Radio id="default" value="" name="radio-disabled" disabled/>
+        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default radio</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Radio id="checked" value="" name="radio-disabled" checked disabled/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/radio/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/radio/examples/Usage.html.twig
new file mode 100644
index 00000000000..050f46c44ad
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/radio/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Radio />
diff --git a/src/Toolkit/kits/flowbite-4/radio/manifest.json b/src/Toolkit/kits/flowbite-4/radio/manifest.json
new file mode 100644
index 00000000000..7081aa11dc6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/radio/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Radio",
+    "description": "The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/radio/templates/components/Radio.html.twig b/src/Toolkit/kits/flowbite-4/radio/templates/components/Radio.html.twig
new file mode 100644
index 00000000000..d85c37c1638
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/radio/templates/components/Radio.html.twig
@@ -0,0 +1,5 @@
+<input
+    type="radio"
+    class="{{ ('w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
diff --git a/src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig
new file mode 100644
index 00000000000..58e8fe22575
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig
@@ -0,0 +1,10 @@
+<form class="w-full max-w-sm">
+    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
+    <twig:Select id="countries">
+        <option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </twig:Select>
+</form>
diff --git a/src/Toolkit/kits/flowbite-4/select/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/select/examples/Disabled.html.twig
new file mode 100644
index 00000000000..af4935d3ae8
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/select/examples/Disabled.html.twig
@@ -0,0 +1,10 @@
+<form class="w-full max-w-sm">
+    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
+    <twig:Select id="countries" disabled>
+        <option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </twig:Select>
+</form>
diff --git a/src/Toolkit/kits/flowbite-4/select/examples/Multiple.html.twig b/src/Toolkit/kits/flowbite-4/select/examples/Multiple.html.twig
new file mode 100644
index 00000000000..b6513eb9c34
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/select/examples/Multiple.html.twig
@@ -0,0 +1,10 @@
+<form class="w-full max-w-sm">
+    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
+    <twig:Select id="countries" multiple>
+        <option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </twig:Select>
+</form>
diff --git a/src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig
new file mode 100644
index 00000000000..79abe1d3d70
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig
@@ -0,0 +1,5 @@
+<twig:Select>
+    <option value="1">1</option>
+    <option value="2">2</option>
+    <option value="3">3</option>
+</twig:Select>
diff --git a/src/Toolkit/kits/flowbite-4/select/manifest.json b/src/Toolkit/kits/flowbite-4/select/manifest.json
new file mode 100644
index 00000000000..f512209ccd6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/select/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Select",
+    "description": "Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig b/src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig
new file mode 100644
index 00000000000..ef741369fa6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig
@@ -0,0 +1,7 @@
+{# @block content The select options (`<option>` elements) #}
+<select
+    class="{{ ('block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body disabled:text-fg-disabled ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</select>
diff --git a/src/Toolkit/kits/flowbite-4/skeleton/examples/Card.html.twig b/src/Toolkit/kits/flowbite-4/skeleton/examples/Card.html.twig
new file mode 100644
index 00000000000..51d0689f7dc
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/skeleton/examples/Card.html.twig
@@ -0,0 +1,27 @@
+<twig:Card class="animate-pulse" role="status">
+    <twig:Card:Header>
+        <twig:Skeleton class="flex items-center justify-center h-48 max-w-sm" shape="rounded" role="status">
+            <twig:ux:icon name="flowbite:image-outline" class="w-11 h-11 text-fg-disabled" aria-hidden="true" />
+            <span class="sr-only">Loading...</span>
+        </twig:Skeleton>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <twig:Skeleton class="h-2.5 w-48 mb-4" />
+
+        <div class="space-y-2.5">
+            <twig:Skeleton class="h-2" />
+            <twig:Skeleton class="h-2" />
+            <twig:Skeleton class="h-2" />
+        </div>
+
+        <div class="flex items-center mt-4">
+            <twig:ux:icon name="flowbite:user-circle-outline" class="w-8 h-8 text-fg-disabled me-3" aria-hidden="true" />
+            <div>
+                <twig:Skeleton class="h-2.5 w-32 mb-2" />
+                <twig:Skeleton class="w-48 h-2" />
+            </div>
+        </div>
+        <span class="sr-only">Loading...</span>
+    </twig:Card:Content>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/skeleton/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/skeleton/examples/Demo.html.twig
new file mode 100644
index 00000000000..6067bf17508
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/skeleton/examples/Demo.html.twig
@@ -0,0 +1,13 @@
+<div class="w-full max-w-sm mx-auto">
+    <div role="status">
+        <twig:Skeleton class="h-2.5 w-48 mb-4" />
+        <div class="space-y-2.5">
+            <twig:Skeleton class="h-2 max-w-[360px]" />
+            <twig:Skeleton class="h-2 w-[200px]" />
+            <twig:Skeleton class="h-2 max-w-[330px]" />
+            <twig:Skeleton class="h-2 max-w-[300px]" />
+            <twig:Skeleton class="h-2 max-w-[360px]" />
+        </div>
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/skeleton/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/skeleton/examples/Usage.html.twig
new file mode 100644
index 00000000000..657fe647212
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/skeleton/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Skeleton class="h-[20px] w-[100px]" />
diff --git a/src/Toolkit/kits/flowbite-4/skeleton/manifest.json b/src/Toolkit/kits/flowbite-4/skeleton/manifest.json
new file mode 100644
index 00000000000..cf78d6a9a1d
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/skeleton/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Skeleton",
+    "description": "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.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/skeleton/templates/components/Skeleton.html.twig b/src/Toolkit/kits/flowbite-4/skeleton/templates/components/Skeleton.html.twig
new file mode 100644
index 00000000000..0c647bf3709
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/skeleton/templates/components/Skeleton.html.twig
@@ -0,0 +1,17 @@
+{# @prop shape 'rounded'|'pill' The badge shape. Defaults to `pill` #}
+{%- props shape = 'pill' -%}
+{%- set style = html_cva(
+    base: 'animate-pulse bg-neutral-quaternary',
+    variants: {
+        shape: {
+            rounded: 'rounded-base',
+            pill: 'rounded-full',
+        },
+    },
+) -%}
+<div
+    class="{{ style.apply({shape: shape}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/Alignment.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/Alignment.html.twig
new file mode 100644
index 00000000000..a321c6c15eb
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/Alignment.html.twig
@@ -0,0 +1,22 @@
+<div class="w-full">
+    <div class="text-left rtl:text-right">
+        <div role="status">
+            <twig:Spinner class="size-8 inline" />
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div class="text-center">
+        <div role="status">
+            <twig:Spinner class="size-8 inline" />
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div class="text-right rtl:text-left">
+        <div role="status">
+            <twig:Spinner class="size-8 inline" />
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/Color.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/Color.html.twig
new file mode 100644
index 00000000000..106a8a614b4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/Color.html.twig
@@ -0,0 +1,6 @@
+<div class="flex items-center gap-6">
+    <twig:Spinner class="text-brand size-8" />
+    <twig:Spinner class="text-danger size-8" />
+    <twig:Spinner class="text-success size-8" />
+    <twig:Spinner class="text-warning size-8" />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/Demo.html.twig
new file mode 100644
index 00000000000..0b8c5cf8913
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/Demo.html.twig
@@ -0,0 +1 @@
+<twig:Spinner class="size-10" />
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/Progress.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/Progress.html.twig
new file mode 100644
index 00000000000..8ceb4bdc527
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/Progress.html.twig
@@ -0,0 +1,20 @@
+<div>
+    <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">
+        <li class="flex items-center">
+            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
+            Upload your file to our website
+        </li>
+        <li class="flex items-center">
+            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
+            Choose your file format
+        </li>
+        <li class="flex items-center">
+            <div role="status">
+                <twig:Spinner class="size-4 text-brand me-2"/>
+                <span class="sr-only">Loading...</span>
+            </div>
+            Preparing your file
+        </li>
+    </ul>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/Size.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/Size.html.twig
new file mode 100644
index 00000000000..ca0aac609e3
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/Size.html.twig
@@ -0,0 +1,5 @@
+<div class="flex items-center gap-6">
+    <twig:Spinner />
+    <twig:Spinner class="size-6" />
+    <twig:Spinner class="size-8" />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/Usage.html.twig
new file mode 100644
index 00000000000..7b17b73cd6b
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/Usage.html.twig
@@ -0,0 +1,3 @@
+<twig:Button disabled>
+    <twig:Spinner /> Please wait
+</twig:Button>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/With Button.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/With Button.html.twig
new file mode 100644
index 00000000000..a15647c96f7
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/With Button.html.twig	
@@ -0,0 +1,6 @@
+<div>
+    <twig:Button variant="tertiary">
+        <twig:Spinner class="me-2 text-brand" />
+        Loading...
+    </twig:Button>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/examples/With Card.html.twig b/src/Toolkit/kits/flowbite-4/spinner/examples/With Card.html.twig
new file mode 100644
index 00000000000..b61c8df2c21
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/examples/With Card.html.twig	
@@ -0,0 +1,14 @@
+<twig:Card class="max-w-sm relative">
+    <twig:Card:Header class="opacity-20">
+        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content class="opacity-20">
+        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </twig:Card:Content>
+
+    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+        <twig:Spinner class="size-8 text-brand"/>
+        <span class="sr-only">Loading...</span>
+    </div>
+</twig:Card>
diff --git a/src/Toolkit/kits/flowbite-4/spinner/manifest.json b/src/Toolkit/kits/flowbite-4/spinner/manifest.json
new file mode 100644
index 00000000000..5eee4f7855a
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Spinner",
+    "description": "An indicator that can be used to show a loading state.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/spinner/templates/components/Spinner.html.twig b/src/Toolkit/kits/flowbite-4/spinner/templates/components/Spinner.html.twig
new file mode 100644
index 00000000000..b9330e0caba
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/spinner/templates/components/Spinner.html.twig
@@ -0,0 +1,5 @@
+<svg role="status" aria-hidden="true" class="{{ ('animate-spin fill-neutral-tertiary size-4 ' ~ attributes.render('class'))|tailwind_merge }}" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"
+{{ attributes }}>
+    <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="currentFill"/>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
+</svg>
diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig
new file mode 100644
index 00000000000..b57d2b8702c
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig
@@ -0,0 +1,40 @@
+{%- set products = [
+    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
+    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
+    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
+] -%}
+<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+    <twig:Table>
+        <twig:Table:Caption>
+            Our products
+            <p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
+        </twig:Table:Caption>
+        <twig:Table:Header class="border-t">
+            <twig:Table:Row>
+                <twig:Table:Head>Product name</twig:Table:Head>
+                <twig:Table:Head>Color</twig:Table:Head>
+                <twig:Table:Head>Category</twig:Table:Head>
+                <twig:Table:Head>Price</twig:Table:Head>
+                <twig:Table:Head>Stock</twig:Table:Head>
+            </twig:Table:Row>
+        </twig:Table:Header>
+        <twig:Table:Body>
+            {% for product in products %}
+                <twig:Table:Row>
+                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
+                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
+                </twig:Table:Row>
+            {% endfor %}
+        </twig:Table:Body>
+        <twig:Table:Footer>
+            <twig:Table:Row>
+                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
+                <twig:Table:Cell>$5997</twig:Table:Cell>
+                <twig:Table:Cell>775</twig:Table:Cell>
+            </twig:Table:Row>
+        </twig:Table:Footer>
+    </twig:Table>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig
new file mode 100644
index 00000000000..35418652882
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig	
@@ -0,0 +1,36 @@
+{%- set products = [
+    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
+    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
+    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
+] -%}
+<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+    <twig:Table>
+        <twig:Table:Header>
+            <twig:Table:Row>
+                <twig:Table:Head>Product name</twig:Table:Head>
+                <twig:Table:Head>Color</twig:Table:Head>
+                <twig:Table:Head>Category</twig:Table:Head>
+                <twig:Table:Head>Price</twig:Table:Head>
+                <twig:Table:Head>Stock</twig:Table:Head>
+            </twig:Table:Row>
+        </twig:Table:Header>
+        <twig:Table:Body highlight="striped">
+            {% for product in products %}
+                <twig:Table:Row>
+                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
+                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
+                </twig:Table:Row>
+            {% endfor %}
+        </twig:Table:Body>
+        <twig:Table:Footer>
+            <twig:Table:Row>
+                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
+                <twig:Table:Cell>$5997</twig:Table:Cell>
+                <twig:Table:Cell>775</twig:Table:Cell>
+            </twig:Table:Row>
+        </twig:Table:Footer>
+    </twig:Table>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig
new file mode 100644
index 00000000000..49852562ac4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig
@@ -0,0 +1,19 @@
+<twig:Table>
+    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
+    <twig:Table:Header>
+        <twig:Table:Row>
+            <twig:Table:Head>Invoice</twig:Table:Head>
+            <twig:Table:Head>Status</twig:Table:Head>
+            <twig:Table:Head>Method</twig:Table:Head>
+            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
+        </twig:Table:Row>
+    </twig:Table:Header>
+    <twig:Table:Body>
+        <twig:Table:Row>
+            <twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
+            <twig:Table:Cell>Paid</twig:Table:Cell>
+            <twig:Table:Cell>Credit Card</twig:Table:Cell>
+            <twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
+        </twig:Table:Row>
+    </twig:Table:Body>
+</twig:Table>
diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig
new file mode 100644
index 00000000000..7702b41991f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig	
@@ -0,0 +1,34 @@
+{%- set products = [
+    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
+    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
+    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
+] -%}
+<twig:Table borderless>
+    <twig:Table:Header>
+        <twig:Table:Row>
+            <twig:Table:Head>Product name</twig:Table:Head>
+            <twig:Table:Head>Color</twig:Table:Head>
+            <twig:Table:Head>Category</twig:Table:Head>
+            <twig:Table:Head>Price</twig:Table:Head>
+            <twig:Table:Head>Stock</twig:Table:Head>
+        </twig:Table:Row>
+    </twig:Table:Header>
+    <twig:Table:Body>
+        {% for product in products %}
+            <twig:Table:Row>
+                <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
+                <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
+            </twig:Table:Row>
+        {% endfor %}
+    </twig:Table:Body>
+    <twig:Table:Footer>
+        <twig:Table:Row>
+            <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
+            <twig:Table:Cell>$5997</twig:Table:Cell>
+            <twig:Table:Cell>775</twig:Table:Cell>
+        </twig:Table:Row>
+    </twig:Table:Footer>
+</twig:Table>
diff --git a/src/Toolkit/kits/flowbite-4/table/manifest.json b/src/Toolkit/kits/flowbite-4/table/manifest.json
new file mode 100644
index 00000000000..c185d09e9f4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Table",
+    "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",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig
new file mode 100644
index 00000000000..ca42391c06e
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig
@@ -0,0 +1,10 @@
+{# @block content The table structure, typically includes `Table:Header`, `Table:Body`, and optionally `Table:Footer` #}
+{# @prop borderless boolean Whether to hide the table borders. Defaults to `false` #}
+{%- props borderless = false -%}
+<table
+    data-border="{{ borderless ? 'borderless' : 'bordered' }}"
+    class="{{ ('w-full text-sm text-left rtl:text-right text-body group/table ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</table>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig
new file mode 100644
index 00000000000..e0f959861de
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig
@@ -0,0 +1,19 @@
+{# @prop highlight 'none'|'hover'|'striped' The visual row style highlight. Defaults to `hover` #}
+{# @block content The table body rows, typically `Table:Row` components #}
+{% props highlight = 'hover' %}
+{%- set style = html_cva(
+    base: '[&>tr]:bg-neutral-primary-soft group-data-[border=bordered]/table:[&>tr]:border-b group-data-[border=bordered]/table:[&>tr]:border-default [&>tr]:transition-colors',
+    variants: {
+        highlight: {
+            none: '',
+            hover: '[&>tr]:hover:bg-neutral-secondary-medium',
+            striped: '[&>tr]:odd:bg-neutral-primary [&>tr]:even:bg-neutral-secondary-soft',
+        },
+    },
+) -%}
+<tbody
+    class="{{ style.apply({highlight: highlight}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</tbody>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig
new file mode 100644
index 00000000000..d5736b184a4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig
@@ -0,0 +1,7 @@
+{# @block content The table caption text #}
+<caption
+    class="{{ ('p-5 text-lg font-medium text-left rtl:text-right text-heading ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</caption>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig
new file mode 100644
index 00000000000..d62e59d60d0
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig
@@ -0,0 +1,7 @@
+{# @block content The cell content #}
+<td
+    class="{{ ('px-6 py-4 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</td>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig
new file mode 100644
index 00000000000..195477dd07f
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig
@@ -0,0 +1,7 @@
+{# @block content The table footer rows, typically `Table:Row` components #}
+<tfoot
+    class="{{ ('font-semibold text-heading ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</tfoot>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig
new file mode 100644
index 00000000000..851ee16d718
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig
@@ -0,0 +1,7 @@
+{# @block content The header cell content #}
+<th
+        class="{{ ('px-6 py-3 font-medium ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</th>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig
new file mode 100644
index 00000000000..caf5e4fa652
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig
@@ -0,0 +1,7 @@
+{# @block content The header row(s), typically a `Table:Row` with `Table:Head` cells #}
+<thead
+    class="{{ ('text-sm text-body rounded-base group-data-[border=bordered]/table:bg-neutral-secondary-soft group-data-[border=bordered]/table:border-b group-data-[border=bordered]/table:border-default ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</thead>
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig
new file mode 100644
index 00000000000..519726fe6f6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig
@@ -0,0 +1,6 @@
+{# @block content The row cells, typically `Table:Cell` or `Table:Head` components #}
+<tr
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</tr>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/assets/controllers/tabs_controller.js b/src/Toolkit/kits/flowbite-4/tabs/assets/controllers/tabs_controller.js
new file mode 100644
index 00000000000..182e5f22662
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/assets/controllers/tabs_controller.js
@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['trigger', 'tab'];
+    static values = { activeTab: String };
+
+    open(e) {
+        this.activeTabValue = e.currentTarget.dataset.tabId;
+    }
+
+    activeTabValueChanged() {
+        this.triggerTargets.forEach((trigger) => {
+            const isActive = trigger.dataset.tabId === this.activeTabValue;
+            trigger.dataset.state = isActive ? 'active' : 'inactive';
+            trigger.ariaSelected = isActive;
+        });
+
+        this.tabTargets.forEach((tab) => {
+            tab.dataset.state = tab.dataset.tabId === this.activeTabValue ? 'active' : 'inactive';
+        });
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/tabs/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/tabs/examples/Demo.html.twig
new file mode 100644
index 00000000000..5375113cea2
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/examples/Demo.html.twig
@@ -0,0 +1,29 @@
+<twig:Tabs defaultValue="profile" class="max-w-xl w-full">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contact">Contact</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="profile">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="dashboard">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="settings">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="contact">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Contact tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+</twig:Tabs>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/tabs/examples/Usage.html.twig
new file mode 100644
index 00000000000..472bc3ca029
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/examples/Usage.html.twig
@@ -0,0 +1,8 @@
+<twig:Tabs defaultValue="account" class="w-[400px]">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="account">Make changes to your account here.</twig:Tabs:Content>
+    <twig:Tabs:Content value="password">Change your password here.</twig:Tabs:Content>
+</twig:Tabs>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/examples/Variant Line.html.twig b/src/Toolkit/kits/flowbite-4/tabs/examples/Variant Line.html.twig
new file mode 100644
index 00000000000..47af294947c
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/examples/Variant Line.html.twig	
@@ -0,0 +1,9 @@
+<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
+    <twig:Tabs:List variant="line">
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contacts">Contacts</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/examples/Variant Pill.html.twig b/src/Toolkit/kits/flowbite-4/tabs/examples/Variant Pill.html.twig
new file mode 100644
index 00000000000..8370c8b03d4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/examples/Variant Pill.html.twig	
@@ -0,0 +1,9 @@
+<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
+    <twig:Tabs:List variant="pill">
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contacts">Contacts</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/examples/Vertical.html.twig b/src/Toolkit/kits/flowbite-4/tabs/examples/Vertical.html.twig
new file mode 100644
index 00000000000..e6fbb115918
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/examples/Vertical.html.twig
@@ -0,0 +1,31 @@
+<twig:Tabs defaultValue="profile" orientation="vertical" class="max-w-xl w-full">
+    <twig:Tabs:List variant="pill">
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contact">Contact</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="profile">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Profile Tab</h3>
+            <p class="mb-2">This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.</p>
+            <p>The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="dashboard">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Dashboard Tab</h3>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="settings">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Settings Tab</h3>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="contact">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Contact Tab</h3>
+        </div>
+    </twig:Tabs:Content>
+</twig:Tabs>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/examples/With Icon.html.twig b/src/Toolkit/kits/flowbite-4/tabs/examples/With Icon.html.twig
new file mode 100644
index 00000000000..efb1e3d9208
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/examples/With Icon.html.twig	
@@ -0,0 +1,23 @@
+<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
+    <twig:Tabs:List variant="line">
+        <twig:Tabs:Trigger value="profile">
+            <twig:ux:icon name="flowbite:user-circle-outline" class="size-4 me-2" aria-hidden="true"/>
+            Profile
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">
+            <twig:ux:icon name="flowbite:grid-outline" class="size-4 me-2" aria-hidden="true"/>
+            Dashboard
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">
+            <twig:ux:icon name="flowbite:adjustments-vertical-outline" class="size-4 me-2" aria-hidden="true"/>
+            Settings
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contacts">
+            <twig:ux:icon name="flowbite:user-headset-outline" class="size-4 me-2" aria-hidden="true"/>
+            Contacts
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>
+            Disabled
+        </twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/manifest.json b/src/Toolkit/kits/flowbite-4/tabs/manifest.json
new file mode 100644
index 00000000000..9becd6babd4
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/manifest.json
@@ -0,0 +1,18 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Tabs",
+    "description": "Use the following default tabs component example to show a list of links that the user can navigate from on your website.",
+    "copy-files": {
+        "assets/": "assets/",
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": [
+            "symfony/ux-icons",
+            "twig/extra-bundle",
+            "twig/html-extra:^3.12.0",
+            "tales-from-a-dev/twig-tailwind-extra:^1.0.0"
+        ]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs.html.twig b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs.html.twig
new file mode 100644
index 00000000000..08a22809658
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs.html.twig
@@ -0,0 +1,14 @@
+{# @prop defaultValue string define the open Tabs at initial rendering. Defaults to `` #}
+{# @prop orientation 'horizontal'|'vertical' define the visual orientation. Defaults to `horizontal` #}
+{# @block content The default block #}
+{%- props defaultValue = '', orientation = 'horizontal' -%}
+
+<div
+    data-controller="tabs"
+    data-tabs-active-tab-value="{{ defaultValue }}"
+    data-orientation="{{ orientation }}"
+    class="{{ ('gap-4 group/tabs flex data-[orientation=horizontal]:flex-col ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {% block content %}{% endblock %}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Content.html.twig b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Content.html.twig
new file mode 100644
index 00000000000..91f830b76a3
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Content.html.twig
@@ -0,0 +1,19 @@
+{# @prop value string Unique suffix identifier for generating Tabs internal IDs #}
+{# @block content The default block #}
+{%- props value -%}
+
+{%- set _tab_id = 'tab-' ~ value -%}
+{%- set _tab_content_id = _tab_id ~ '-description' -%}
+{%- set open = defaultValue is same as(value) -%}
+<div
+    id="{{ _tab_content_id }}"
+    data-tabs-target="tab"
+    data-tab-id="{{ value }}"
+    role="tabpanel"
+    aria-labelledby="{{ _tab_id }}"
+    data-state="{{ open ? 'active' : 'inactive' }}"
+    class="{{ ('data-[state=inactive]:hidden ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/List.html.twig b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/List.html.twig
new file mode 100644
index 00000000000..504199ee16c
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/List.html.twig
@@ -0,0 +1,20 @@
+{# @prop variant 'default'|'line' The visual style variant. Defaults to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
+{%- set style = html_cva(
+    base: 'group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col',
+    variants: {
+        variant: {
+            default: 'border-b border-default',
+            line: 'border-b border-default',
+        },
+    },
+) -%}
+
+<ul
+    role="tablist"
+    data-variant="{{ variant }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}>
+    {% block content %}{% endblock %}
+</ul>
diff --git a/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Trigger.html.twig b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Trigger.html.twig
new file mode 100644
index 00000000000..7c99f3139d6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Trigger.html.twig
@@ -0,0 +1,23 @@
+{# @prop value string Unique suffix identifier for generating Tabs internal IDs #}
+{# @block content The default block #}
+{%- props value -%}
+
+{%- set _tab_id = 'tab-' ~ value -%}
+{%- set _tab_content_id = _tab_id ~ '-description' -%}
+{%- set open = defaultValue is same as(value) -%}
+<li class="me-2" role="presentation">
+    <button
+        id="{{ _tab_id }}"
+        data-action="click->tabs#open"
+        data-tabs-target="trigger"
+        data-tab-id="{{ value }}"
+        role="tab"
+        aria-controls="{{ _tab_content_id }}"
+        aria-selected="{{ open ? 'true' : 'false' }}"
+        data-state="{{ open ? 'active' : 'inactive' }}"
+        class="{{ ('inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&_svg:not([class*=\'size-\'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 ' ~ attributes.render('class'))|tailwind_merge }}"
+        {{ attributes }}
+    >
+        {%- block content -%}{%- endblock -%}
+    </button>
+</li>
diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig
new file mode 100644
index 00000000000..ef474ce1389
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig
@@ -0,0 +1 @@
+<twig:Textarea placeholder="Type your message here." class="max-w-sm" />
diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig
new file mode 100644
index 00000000000..43491558dde
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig
@@ -0,0 +1 @@
+<twig:Textarea placeholder="Type your message here." />
diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig
new file mode 100644
index 00000000000..4df498bcebb
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig
@@ -0,0 +1 @@
+<twig:Textarea placeholder="Type your message here." disabled class="max-w-sm" />
diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig
new file mode 100644
index 00000000000..1ba2c67a4d6
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig
@@ -0,0 +1 @@
+<twig:Textarea />
diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig
new file mode 100644
index 00000000000..db7ab938fd7
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig	
@@ -0,0 +1,4 @@
+<div class="grid w-sm gap-1.5">
+    <twig:Label for="message">Your message</twig:Label>
+    <twig:Textarea id="message" placeholder="Type your message here." />
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/textarea/manifest.json b/src/Toolkit/kits/flowbite-4/textarea/manifest.json
new file mode 100644
index 00000000000..437c0632e86
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Textarea",
+    "description": "The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig b/src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig
new file mode 100644
index 00000000000..76a9cbf0345
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig
@@ -0,0 +1,7 @@
+{# @block content The initial textarea value #}
+<textarea
+    class="{{ ('bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</textarea>
diff --git a/src/Toolkit/kits/flowbite-4/toggle/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/toggle/examples/Demo.html.twig
new file mode 100644
index 00000000000..b22066542ff
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/toggle/examples/Demo.html.twig
@@ -0,0 +1,3 @@
+<twig:Toggle id="checked" value="" checked>
+    Toggle me
+</twig:Toggle>
diff --git a/src/Toolkit/kits/flowbite-4/toggle/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/toggle/examples/Disabled.html.twig
new file mode 100644
index 00000000000..81ef1623ef5
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/toggle/examples/Disabled.html.twig
@@ -0,0 +1,9 @@
+<div class="flex flex-col gap-3">
+    <twig:Toggle id="checked" value="" disabled>
+        Toggle me
+    </twig:Toggle>
+
+    <twig:Toggle id="checked" value="" checked disabled>
+        Toggle me
+    </twig:Toggle>
+</div>
diff --git a/src/Toolkit/kits/flowbite-4/toggle/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/toggle/examples/Usage.html.twig
new file mode 100644
index 00000000000..2298ba4a9cd
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/toggle/examples/Usage.html.twig
@@ -0,0 +1,3 @@
+<twig:Toggle>
+    Label
+</twig:Toggle>
diff --git a/src/Toolkit/kits/flowbite-4/toggle/manifest.json b/src/Toolkit/kits/flowbite-4/toggle/manifest.json
new file mode 100644
index 00000000000..05a8b97d218
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/toggle/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Toggle",
+    "description": "Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/flowbite-4/toggle/templates/components/Toggle.html.twig b/src/Toolkit/kits/flowbite-4/toggle/templates/components/Toggle.html.twig
new file mode 100644
index 00000000000..ed1fe319102
--- /dev/null
+++ b/src/Toolkit/kits/flowbite-4/toggle/templates/components/Toggle.html.twig
@@ -0,0 +1,7 @@
+<label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="{{ ('sr-only peer ' ~ attributes.render('class'))|tailwind_merge }}" {{ attributes }}>
+    <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-disabled:bg-neutral-tertiary peer-checked:bg-brand"></div>
+    <span class="select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled">
+        {%- block content -%}{%- endblock -%}
+    </span>
+</label>
diff --git a/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js b/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js
index b13f9f89633..959b178d04a 100644
--- a/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js
+++ b/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js
@@ -18,9 +18,13 @@ export default class extends Controller {
 
         if (this.hasTriggerTarget) {
             if (this.dialogTarget.getAnimations().length > 0) {
-                this.dialogTarget.addEventListener('transitionend', () => {
-                    this.triggerTarget.setAttribute('aria-expanded', 'true');
-                });
+                this.dialogTarget.addEventListener(
+                    'transitionend',
+                    () => {
+                        this.triggerTarget.setAttribute('aria-expanded', 'true');
+                    },
+                    { once: true }
+                );
             } else {
                 this.triggerTarget.setAttribute('aria-expanded', 'true');
             }
diff --git a/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Content.html.twig b/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Content.html.twig
index 8b9d9fac04b..055388ee9b2 100644
--- a/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Content.html.twig
+++ b/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Content.html.twig
@@ -3,16 +3,15 @@
 {%- props value -%}
 
 {%- set _tab_id = 'tab-' ~ value -%}
-{%- set _tab_title_id = _tab_id ~ '-title' -%}
-{%- set _tab_description_id = _tab_id ~ '-description' -%}
+{%- set _tab_content_id = _tab_id ~ '-description' -%}
 {%- set open = defaultValue is same as(value) -%}
 <div
-    id="{{ _tab_description_id }}"
+    id="{{ _tab_content_id }}"
     data-slot="tabs-content"
     data-tabs-target="tab"
     data-tab-id="{{ value }}"
     role="tabpanel"
-    aria-labelledby="{{ _tab_title_id }}"
+    aria-labelledby="{{ _tab_id }}"
     data-state="{{ open ? 'active' : 'inactive' }}"
     class="{{ ('text-sm flex-1 outline-none data-[state=inactive]:hidden ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
diff --git a/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Trigger.html.twig b/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Trigger.html.twig
index ea565bad24e..d77efee1948 100644
--- a/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Trigger.html.twig
+++ b/src/Toolkit/kits/shadcn/tabs/templates/components/Tabs/Trigger.html.twig
@@ -3,8 +3,7 @@
 {%- props value -%}
 
 {%- set _tab_id = 'tab-' ~ value -%}
-{%- set _tab_title_id = _tab_id ~ '-title' -%}
-{%- set _tab_description_id = _tab_id ~ '-description' -%}
+{%- set _tab_content_id = _tab_id ~ '-description' -%}
 {%- set open = defaultValue is same as(value) -%}
 <button
     id="{{ _tab_id }}"
@@ -13,7 +12,7 @@
     data-tabs-target="trigger"
     data-tab-id="{{ value }}"
     role="tab"
-    aria-controls="{{ _tab_description_id }}"
+    aria-controls="{{ _tab_content_id }}"
     aria-selected="{{ open ? 'true' : 'false' }}"
     data-state="{{ open ? 'active' : 'inactive' }}"
     class="{{ ('gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*=\'size-\'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100 ' ~ attributes.render('class'))|tailwind_merge }}"
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Accent.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Accent.html__1.html
new file mode 100644
index 00000000000..922ef6a6a13
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Accent.html__1.html	
@@ -0,0 +1,94 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-xl items-start gap-4">
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-brand-strong bg-brand-softer border-brand-subtle border-t-4 rounded-none">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-danger-strong bg-danger-soft border-danger-subtle border-t-4 rounded-none">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-success-strong bg-success-soft border-success-subtle border-t-4 rounded-none">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-warning bg-warning-soft border-warning-subtle border-t-4 rounded-none">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-heading bg-neutral-secondary-medium border-default-medium border-t-4 rounded-none">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Action.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Action.html__1.html
new file mode 100644
index 00000000000..9956b431294
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Action.html__1.html	
@@ -0,0 +1,34 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<twig:Alert class="max-w-xl">
+    <twig:block name="icon">
+        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+    </twig:block>
+    <twig:Alert:Title>This is an info alert</twig:Alert:Title>
+    <twig:Alert:Description>
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+    </twig:Alert:Description>
+    <twig:Alert:Action>
+        <twig:Button size="sm">
+            <twig:ux:icon name="flowbite:eye-outline" class="size-3.5 me-1.5" aria-hidden="true" />
+            View more
+        </twig:Button>
+    </twig:Alert:Action>
+</twig:Alert>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-brand-strong bg-brand-softer border-brand-subtle max-w-xl">        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+    <div>
+<div class="font-medium group-has-[&gt;svg]/alert:col-start-2">This is an info alert</div>
+    <div class="">More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+    </div>
+    <div class="mt-2 group-has-[&gt;svg]/alert:col-start-2">
+<button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-3 py-2 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-3.5 me-1.5" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6s4.03-6 9-6s9 4.8 9 6Z"></path><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path></g></svg>
+            View more
+        </button>
+    </div>
+</div>
+    </div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Border.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Border.html__1.html
new file mode 100644
index 00000000000..650dd8607dc
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Border.html__1.html	
@@ -0,0 +1,94 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" border="bordered">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-xl items-start gap-4">
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-brand-strong bg-brand-softer border-brand-subtle border">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-danger-strong bg-danger-soft border-danger-subtle border">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-success-strong bg-success-soft border-success-subtle border">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-warning bg-warning-soft border-warning-subtle border">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-heading bg-neutral-secondary-medium border-default-medium border">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Demo.html__1.html
new file mode 100644
index 00000000000..6b6956f33e4
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Demo.html__1.html	
@@ -0,0 +1,79 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark">
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-xl items-start gap-4">
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-brand-strong bg-brand-softer border-brand-subtle">
+<div>
+<div class="">
+<p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-danger-strong bg-danger-soft border-danger-subtle">
+<div>
+<div class="">
+<p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-success-strong bg-success-soft border-success-subtle">
+<div>
+<div class="">
+<p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-warning bg-warning-soft border-warning-subtle">
+<div>
+<div class="">
+<p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-heading bg-neutral-secondary-medium border-default-medium">
+<div>
+<div class="">
+<p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Dismissing.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Dismissing.html__1.html
new file mode 100644
index 00000000000..5e65ec903ba
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Dismissing.html__1.html	
@@ -0,0 +1,114 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple info alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple danger alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple success alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple warning alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" dismissible>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p>A simple dark alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-xl items-start gap-4">
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-brand-strong bg-brand-softer border-brand-subtle" data-controller="alert" data-alert-target="alert">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p>A simple info alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </div>
+    </div>
+            <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click-&gt;alert#close" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+        </button>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-danger-strong bg-danger-soft border-danger-subtle" data-controller="alert" data-alert-target="alert">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p>A simple danger alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </div>
+    </div>
+            <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click-&gt;alert#close" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+        </button>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-success-strong bg-success-soft border-success-subtle" data-controller="alert" data-alert-target="alert">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p>A simple success alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </div>
+    </div>
+            <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click-&gt;alert#close" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+        </button>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-warning bg-warning-soft border-warning-subtle" data-controller="alert" data-alert-target="alert">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p>A simple warning alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </div>
+    </div>
+            <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click-&gt;alert#close" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+        </button>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-heading bg-neutral-secondary-medium border-default-medium" data-controller="alert" data-alert-target="alert">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p>A simple dark alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
+        </div>
+    </div>
+            <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click-&gt;alert#close" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Usage.html__1.html
new file mode 100644
index 00000000000..4e62844b62d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Usage.html__1.html	
@@ -0,0 +1,32 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<twig:Alert
+    variant="brand | danger | success | warning | dark"
+    border=" none | bordered | accent"
+>
+    <twig:block name="icon">
+        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+    </twig:block>
+    <twig:Alert:Title>Info alert!</twig:Alert:Title>
+    <twig:Alert:Description>
+        You can add components to your app using the cli.
+    </twig:Alert:Description>
+    <twig:Alert:Action>
+        <twig:Button size="sm">Enable</twig:Button>
+    </twig:Alert:Action>
+</twig:Alert>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="alert" class="flex gap-2 text-sm p-4 rounded-base border-transparent *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert">        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+    <div>
+<div class="font-medium group-has-[&gt;svg]/alert:col-start-2">Info alert!</div>
+    <div class="">You can add components to your app using the cli.
+    </div>
+    <div class="mt-2 group-has-[&gt;svg]/alert:col-start-2">
+<button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-3 py-2 rounded-base">Enable</button>
+    </div>
+</div>
+    </div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file With Icon.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file With Icon.html__1.html
new file mode 100644
index 00000000000..93ccda385c6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file With Icon.html__1.html	
@@ -0,0 +1,94 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert>
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-xl items-start gap-4">
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-brand-strong bg-brand-softer border-brand-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-danger-strong bg-danger-soft border-danger-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-success-strong bg-success-soft border-success-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-warning bg-warning-soft border-warning-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-heading bg-neutral-secondary-medium border-default-medium">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="">
+<p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file With List.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file With List.html__1.html
new file mode 100644
index 00000000000..5b56439ecb1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file With List.html__1.html	
@@ -0,0 +1,108 @@
+<!--
+- Kit: Flowbite v4
+- Component: Alert
+- Code:
+```twig
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert variant="success">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
+        <twig:Alert:Description>
+            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </twig:Alert:Description>
+        <twig:Alert:Action>
+            <a href="#">See recommendation here</a>
+        </twig:Alert:Action>
+    </twig:Alert>
+
+    <twig:Alert variant="warning">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
+        <twig:Alert:Description>
+            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </twig:Alert:Description>
+        <twig:Alert:Action>
+            <a href="#">See recommendation here</a>
+        </twig:Alert:Action>
+    </twig:Alert>
+
+    <twig:Alert variant="danger">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
+        <twig:Alert:Description>
+            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </twig:Alert:Description>
+        <twig:Alert:Action>
+            <a href="#">See recommendation here</a>
+        </twig:Alert:Action>
+    </twig:Alert>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-xl items-start gap-4">
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-success-strong bg-success-soft border-success-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="font-medium group-has-[&gt;svg]/alert:col-start-2">Ensure that these requirements are met:</div>
+        <div class="">
+<ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </div>
+        <div class="mt-2 group-has-[&gt;svg]/alert:col-start-2">
+<a href="#">See recommendation here</a>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-warning bg-warning-soft border-warning-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="font-medium group-has-[&gt;svg]/alert:col-start-2">Ensure that these requirements are met:</div>
+        <div class="">
+<ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </div>
+        <div class="mt-2 group-has-[&gt;svg]/alert:col-start-2">
+<a href="#">See recommendation here</a>
+        </div>
+    </div>
+    </div>
+
+    <div role="alert" class="flex gap-2 text-sm p-4 rounded-base *:[svg:not([class*='size-'])]:size-4 [&amp;_a]:hover:no-underline [&amp;_a]:underline group/alert text-fg-danger-strong bg-danger-soft border-danger-subtle">            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="shrink-0" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+        <div>
+<div class="font-medium group-has-[&gt;svg]/alert:col-start-2">Ensure that these requirements are met:</div>
+        <div class="">
+<ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
+                <li>At least 10 characters (and up to 100 characters)</li>
+                <li>At least one lowercase character</li>
+                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
+            </ul>
+        </div>
+        <div class="mt-2 group-has-[&gt;svg]/alert:col-start-2">
+<a href="#">See recommendation here</a>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file As link.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file As link.html__1.html
new file mode 100644
index 00000000000..8eddbd09101
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file As link.html__1.html	
@@ -0,0 +1,23 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="brand" border="bordered">Brand</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="alternative" border="bordered">Alternative</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="gray" border="bordered">Gray</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="danger" border="bordered">Danger</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="success" border="bordered">Success</twig:Badge>
+    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="warning" border="bordered">Warning</twig:Badge>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <a class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-1.5 py-0.5 text-xs rounded border" href="https://ux.symfony.com/" target="_blank">Brand</a>
+    <a class="inline-flex items-center justify-center font-medium bg-neutral-primary-soft text-heading border-default [a&amp;]:hover:bg-neutral-secondary-medium px-1.5 py-0.5 text-xs rounded border" href="https://ux.symfony.com/" target="_blank">Alternative</a>
+    <a class="inline-flex items-center justify-center font-medium bg-neutral-secondary-medium text-heading border-default-medium [a&amp;]:hover:bg-neutral-tertiary-medium px-1.5 py-0.5 text-xs rounded border" href="https://ux.symfony.com/" target="_blank">Gray</a>
+    <a class="inline-flex items-center justify-center font-medium bg-danger-soft text-fg-danger-strong border-danger-subtle [a&amp;]:hover:bg-danger-medium px-1.5 py-0.5 text-xs rounded border" href="https://ux.symfony.com/" target="_blank">Danger</a>
+    <a class="inline-flex items-center justify-center font-medium bg-success-soft text-fg-success-strong border-success-subtle [a&amp;]:hover:bg-success-medium px-1.5 py-0.5 text-xs rounded border" href="https://ux.symfony.com/" target="_blank">Success</a>
+    <a class="inline-flex items-center justify-center font-medium bg-warning-soft text-fg-warning border-warning-subtle [a&amp;]:hover:bg-warning-medium px-1.5 py-0.5 text-xs rounded border" href="https://ux.symfony.com/" target="_blank">Warning</a>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Bordered.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Bordered.html__1.html
new file mode 100644
index 00000000000..e578e63f2b4
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Bordered.html__1.html	
@@ -0,0 +1,23 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" border="bordered">Brand</twig:Badge>
+    <twig:Badge variant="alternative" border="bordered">Alternative</twig:Badge>
+    <twig:Badge variant="gray" border="bordered">Gray</twig:Badge>
+    <twig:Badge variant="danger" border="bordered">Danger</twig:Badge>
+    <twig:Badge variant="success" border="bordered">Success</twig:Badge>
+    <twig:Badge variant="warning" border="bordered">Warning</twig:Badge>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <div class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-1.5 py-0.5 text-xs rounded border">Brand</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-primary-soft text-heading border-default [a&amp;]:hover:bg-neutral-secondary-medium px-1.5 py-0.5 text-xs rounded border">Alternative</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-secondary-medium text-heading border-default-medium [a&amp;]:hover:bg-neutral-tertiary-medium px-1.5 py-0.5 text-xs rounded border">Gray</div>
+    <div class="inline-flex items-center justify-center font-medium bg-danger-soft text-fg-danger-strong border-danger-subtle [a&amp;]:hover:bg-danger-medium px-1.5 py-0.5 text-xs rounded border">Danger</div>
+    <div class="inline-flex items-center justify-center font-medium bg-success-soft text-fg-success-strong border-success-subtle [a&amp;]:hover:bg-success-medium px-1.5 py-0.5 text-xs rounded border">Success</div>
+    <div class="inline-flex items-center justify-center font-medium bg-warning-soft text-fg-warning border-warning-subtle [a&amp;]:hover:bg-warning-medium px-1.5 py-0.5 text-xs rounded border">Warning</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Demo.html__1.html
new file mode 100644
index 00000000000..f718d77d7ca
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Demo.html__1.html	
@@ -0,0 +1,23 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand">Brand</twig:Badge>
+    <twig:Badge variant="alternative">Alternative</twig:Badge>
+    <twig:Badge variant="gray">Gray</twig:Badge>
+    <twig:Badge variant="danger">Danger</twig:Badge>
+    <twig:Badge variant="success">Success</twig:Badge>
+    <twig:Badge variant="warning">Warning</twig:Badge>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <div class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-1.5 py-0.5 text-xs rounded">Brand</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-primary-soft text-heading border-default [a&amp;]:hover:bg-neutral-secondary-medium px-1.5 py-0.5 text-xs rounded">Alternative</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-secondary-medium text-heading border-default-medium [a&amp;]:hover:bg-neutral-tertiary-medium px-1.5 py-0.5 text-xs rounded">Gray</div>
+    <div class="inline-flex items-center justify-center font-medium bg-danger-soft text-fg-danger-strong border-danger-subtle [a&amp;]:hover:bg-danger-medium px-1.5 py-0.5 text-xs rounded">Danger</div>
+    <div class="inline-flex items-center justify-center font-medium bg-success-soft text-fg-success-strong border-success-subtle [a&amp;]:hover:bg-success-medium px-1.5 py-0.5 text-xs rounded">Success</div>
+    <div class="inline-flex items-center justify-center font-medium bg-warning-soft text-fg-warning border-warning-subtle [a&amp;]:hover:bg-warning-medium px-1.5 py-0.5 text-xs rounded">Warning</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Icon.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Icon.html__1.html
new file mode 100644
index 00000000000..21a4aedc417
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Icon.html__1.html	
@@ -0,0 +1,29 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="alternative" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="gray" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="danger" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="success" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+    <twig:Badge variant="warning" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <div class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-1.5 py-0.5 text-xs rounded border">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg> 2 min ago</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-primary-soft text-heading border-default [a&amp;]:hover:bg-neutral-secondary-medium px-1.5 py-0.5 text-xs rounded border">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg> 2 min ago</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-secondary-medium text-heading border-default-medium [a&amp;]:hover:bg-neutral-tertiary-medium px-1.5 py-0.5 text-xs rounded border">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg> 2 min ago</div>
+    <div class="inline-flex items-center justify-center font-medium bg-danger-soft text-fg-danger-strong border-danger-subtle [a&amp;]:hover:bg-danger-medium px-1.5 py-0.5 text-xs rounded border">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg> 2 min ago</div>
+    <div class="inline-flex items-center justify-center font-medium bg-success-soft text-fg-success-strong border-success-subtle [a&amp;]:hover:bg-success-medium px-1.5 py-0.5 text-xs rounded border">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg> 2 min ago</div>
+    <div class="inline-flex items-center justify-center font-medium bg-warning-soft text-fg-warning border-warning-subtle [a&amp;]:hover:bg-warning-medium px-1.5 py-0.5 text-xs rounded border">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg> 2 min ago</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Large.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Large.html__1.html
new file mode 100644
index 00000000000..390879ae06c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Large.html__1.html	
@@ -0,0 +1,23 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" size="lg">Brand</twig:Badge>
+    <twig:Badge variant="alternative" size="lg">Alternative</twig:Badge>
+    <twig:Badge variant="gray" size="lg">Gray</twig:Badge>
+    <twig:Badge variant="danger" size="lg">Danger</twig:Badge>
+    <twig:Badge variant="success" size="lg">Success</twig:Badge>
+    <twig:Badge variant="warning" size="lg">Warning</twig:Badge>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <div class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-2 py-1 text-sm rounded">Brand</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-primary-soft text-heading border-default [a&amp;]:hover:bg-neutral-secondary-medium px-2 py-1 text-sm rounded">Alternative</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-secondary-medium text-heading border-default-medium [a&amp;]:hover:bg-neutral-tertiary-medium px-2 py-1 text-sm rounded">Gray</div>
+    <div class="inline-flex items-center justify-center font-medium bg-danger-soft text-fg-danger-strong border-danger-subtle [a&amp;]:hover:bg-danger-medium px-2 py-1 text-sm rounded">Danger</div>
+    <div class="inline-flex items-center justify-center font-medium bg-success-soft text-fg-success-strong border-success-subtle [a&amp;]:hover:bg-success-medium px-2 py-1 text-sm rounded">Success</div>
+    <div class="inline-flex items-center justify-center font-medium bg-warning-soft text-fg-warning border-warning-subtle [a&amp;]:hover:bg-warning-medium px-2 py-1 text-sm rounded">Warning</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Pill.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Pill.html__1.html
new file mode 100644
index 00000000000..dd09eb823a4
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Pill.html__1.html	
@@ -0,0 +1,23 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Badge variant="brand" shape="pill">Brand</twig:Badge>
+    <twig:Badge variant="alternative" shape="pill">Alternative</twig:Badge>
+    <twig:Badge variant="gray" shape="pill">Gray</twig:Badge>
+    <twig:Badge variant="danger" shape="pill">Danger</twig:Badge>
+    <twig:Badge variant="success" shape="pill">Success</twig:Badge>
+    <twig:Badge variant="warning" shape="pill">Warning</twig:Badge>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <div class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-1.5 py-0.5 text-xs rounded-full">Brand</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-primary-soft text-heading border-default [a&amp;]:hover:bg-neutral-secondary-medium px-1.5 py-0.5 text-xs rounded-full">Alternative</div>
+    <div class="inline-flex items-center justify-center font-medium bg-neutral-secondary-medium text-heading border-default-medium [a&amp;]:hover:bg-neutral-tertiary-medium px-1.5 py-0.5 text-xs rounded-full">Gray</div>
+    <div class="inline-flex items-center justify-center font-medium bg-danger-soft text-fg-danger-strong border-danger-subtle [a&amp;]:hover:bg-danger-medium px-1.5 py-0.5 text-xs rounded-full">Danger</div>
+    <div class="inline-flex items-center justify-center font-medium bg-success-soft text-fg-success-strong border-success-subtle [a&amp;]:hover:bg-success-medium px-1.5 py-0.5 text-xs rounded-full">Success</div>
+    <div class="inline-flex items-center justify-center font-medium bg-warning-soft text-fg-warning border-warning-subtle [a&amp;]:hover:bg-warning-medium px-1.5 py-0.5 text-xs rounded-full">Warning</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Usage.html__1.html
new file mode 100644
index 00000000000..d045aa72cd3
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Usage.html__1.html	
@@ -0,0 +1,17 @@
+<!--
+- Kit: Flowbite v4
+- Component: Badge
+- Code:
+```twig
+<twig:Badge
+    variant="brand | alternative | gray | danger | success | warning"
+    size="default | lg"
+    shape="rounded | pill"
+    border="none | bordered"
+>
+    Badge
+</twig:Badge>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="inline-flex items-center justify-center font-medium">Badge
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Demo.html__1.html
new file mode 100644
index 00000000000..35d2a6c64f8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Demo.html__1.html	
@@ -0,0 +1,27 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="space-x-2 space-y-2">
+    <twig:Button>Default</twig:Button>
+    <twig:Button variant="secondary">Secondary</twig:Button>
+    <twig:Button variant="tertiary">Tertiary</twig:Button>
+    <twig:Button variant="success">Success</twig:Button>
+    <twig:Button variant="danger">Danger</twig:Button>
+    <twig:Button variant="warning">Warning</twig:Button>
+    <twig:Button variant="dark">Dark</twig:Button>
+    <twig:Button variant="ghost">Ghost</twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-x-2 space-y-2">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base">Default</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base">Secondary</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Tertiary</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-success hover:bg-success-strong focus:ring-success-medium text-sm px-4 py-2.5 rounded-base">Success</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-danger hover:bg-danger-strong focus:ring-danger-medium text-sm px-4 py-2.5 rounded-base">Danger</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-warning hover:bg-warning-strong focus:ring-warning-medium text-sm px-4 py-2.5 rounded-base">Warning</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-dark hover:bg-dark-strong focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base">Dark</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none text-sm px-4 py-2.5 rounded-base">Ghost</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Icon.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Icon.html__1.html
new file mode 100644
index 00000000000..eab11be3b16
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Icon.html__1.html	
@@ -0,0 +1,63 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="space-x-2 space-y-2">
+    <twig:Button size="icon-xs">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon-sm">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon-xs" variant="outline">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon-sm" variant="outline">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+
+    <twig:Button size="icon" variant="outline">
+        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
+        <span class="sr-only">Icon description</span>
+    </twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-x-2 space-y-2">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium w-8 h-8 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"></path></svg>
+        <span class="sr-only">Icon description</span>
+    </button>
+
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium w-9 h-9 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"></path></svg>
+        <span class="sr-only">Icon description</span>
+    </button>
+
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium w-10 h-10 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"></path></svg>
+        <span class="sr-only">Icon description</span>
+    </button>
+
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary w-8 h-8 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"></path></svg>
+        <span class="sr-only">Icon description</span>
+    </button>
+
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary w-9 h-9 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"></path></svg>
+        <span class="sr-only">Icon description</span>
+    </button>
+
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"></path></svg>
+        <span class="sr-only">Icon description</span>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Loader.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Loader.html__1.html
new file mode 100644
index 00000000000..49395c8f90e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Loader.html__1.html	
@@ -0,0 +1,22 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="space-x-2 space-y-2">
+    <twig:Button>
+        <twig:Spinner class="me-2" />
+        Loading...
+    </twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-x-2 space-y-2">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base"><svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-4 me-2" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+        Loading...
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Outline.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Outline.html__1.html
new file mode 100644
index 00000000000..02d2fd0e1ec
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Outline.html__1.html	
@@ -0,0 +1,21 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="space-x-2 space-y-2">
+    <twig:Button variant="outline">Outline</twig:Button>
+    <twig:Button variant="outline-brand">Brand</twig:Button>
+    <twig:Button variant="outline-success">Success</twig:Button>
+    <twig:Button variant="outline-danger">Danger</twig:Button>
+    <twig:Button variant="outline-warning">Warning</twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-x-2 space-y-2">
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base">Outline</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-fg-brand bg-neutral-primary border-brand hover:bg-brand hover:text-white focus:ring-brand-subtle text-sm px-4 py-2.5 rounded-base">Brand</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-success bg-neutral-primary border-success hover:bg-success hover:text-white focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base">Success</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-danger bg-neutral-primary border-danger hover:bg-danger hover:text-white focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base">Danger</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-warning bg-neutral-primary border-warning hover:bg-warning hover:text-white focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base">Warning</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Pill.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Pill.html__1.html
new file mode 100644
index 00000000000..00d9df7f94a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Pill.html__1.html	
@@ -0,0 +1,27 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="space-x-2 space-y-2">
+    <twig:Button shape="pill">Default</twig:Button>
+    <twig:Button shape="pill" variant="secondary">Secondary</twig:Button>
+    <twig:Button shape="pill" variant="tertiary">Tertiary</twig:Button>
+    <twig:Button shape="pill" variant="success">Success</twig:Button>
+    <twig:Button shape="pill" variant="danger">Danger</twig:Button>
+    <twig:Button shape="pill" variant="warning">Warning</twig:Button>
+    <twig:Button shape="pill" variant="dark">Dark</twig:Button>
+    <twig:Button shape="pill" variant="ghost">Ghost</twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-x-2 space-y-2">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-full">Default</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-full">Secondary</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-full">Tertiary</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-success hover:bg-success-strong focus:ring-success-medium text-sm px-4 py-2.5 rounded-full">Success</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-danger hover:bg-danger-strong focus:ring-danger-medium text-sm px-4 py-2.5 rounded-full">Danger</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-warning hover:bg-warning-strong focus:ring-warning-medium text-sm px-4 py-2.5 rounded-full">Warning</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-dark hover:bg-dark-strong focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-full">Dark</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none text-sm px-4 py-2.5 rounded-full">Ghost</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Size.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Size.html__1.html
new file mode 100644
index 00000000000..f791a180f52
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Size.html__1.html	
@@ -0,0 +1,21 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="space-x-2 space-y-2">
+    <twig:Button size="xs">Extra small</twig:Button>
+    <twig:Button size="sm">Small</twig:Button>
+    <twig:Button size="default">Base</twig:Button>
+    <twig:Button size="lg">Large</twig:Button>
+    <twig:Button size="xl">Extra large</twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-x-2 space-y-2">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-xs px-3 py-1.5 rounded-base">Extra small</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-3 py-2 rounded-base">Small</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base">Base</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-base px-5 py-3 rounded-base">Large</button>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-base px-6 py-3.5 rounded-base">Extra large</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Usage.html__1.html
new file mode 100644
index 00000000000..3470a6a5bb0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Usage.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<twig:Button
+    variant="brand | secondary | tertiary | success | danger | warning | dark | ghost | outline | outline-brand | outline-success | outline-danger | outline-warning"
+    size="default | xs | sm | lg | xl | icon | icon-xs | icon-sm"
+    shape="rounded | pill"
+>
+    Button
+</twig:Button>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs">Button
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file With icon.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file With icon.html__1.html
new file mode 100644
index 00000000000..edb71463d9d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file With icon.html__1.html	
@@ -0,0 +1,27 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Button>
+        <twig:ux:icon name="flowbite:cart-outline" class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true"/>
+        Buy now
+    </twig:Button>
+
+    <twig:Button>
+        Choose plan
+        <twig:ux:icon name="flowbite:arrow-right-outline"  class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
+    </twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center space-x-2">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4a2 2 0 0 0 0-4m8 0a2 2 0 1 0 0 4a2 2 0 0 0 0-4m-8.5-3h9.25L19 7H7.312"></path></svg>
+        Buy now
+    </button>
+
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base">Choose plan
+        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0l-4 4m4-4l-4-4"></path></svg>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Demo.html__1.html
new file mode 100644
index 00000000000..6269b838659
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Demo.html__1.html	
@@ -0,0 +1,17 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup>
+    <twig:Button variant="tertiary" size="sm">Profile</twig:Button>
+    <twig:Button variant="tertiary" size="sm">Settings</twig:Button>
+    <twig:Button variant="tertiary" size="sm">Messages</twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-orientation="horizontal" class="inline-flex rounded-base shadow-xs -space-x-px [&amp;&gt;*]:rounded-none [&amp;&gt;*:first-child]:rounded-s-base [&amp;&gt;*:last-child]:rounded-e-base">
+<button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-3 py-2 rounded-base">Profile</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-3 py-2 rounded-base">Settings</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-3 py-2 rounded-base">Messages</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Orientation.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Orientation.html__1.html
new file mode 100644
index 00000000000..cf3c1655760
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Orientation.html__1.html	
@@ -0,0 +1,17 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup orientation="vertical" class="w-56">
+    <twig:Button variant="tertiary">Profile</twig:Button>
+    <twig:Button variant="tertiary">Settings</twig:Button>
+    <twig:Button variant="tertiary">Messages</twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-orientation="vertical" class="inline-flex rounded-base shadow-xs -space-x-px [&amp;&gt;*]:rounded-none flex-col [&amp;&gt;*:first-child]:rounded-t-base [&amp;&gt;*:last-child]:rounded-b-base w-56">
+<button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Profile</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Settings</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Messages</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Size.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Size.html__1.html
new file mode 100644
index 00000000000..ac3bceb5401
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Size.html__1.html	
@@ -0,0 +1,41 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button Group
+- Code:
+```twig
+<div class="flex flex-col items-start gap-8">
+    <twig:ButtonGroup>
+        <twig:Button variant="tertiary" size="sm">Small</twig:Button>
+        <twig:Button variant="tertiary" size="sm">Button</twig:Button>
+        <twig:Button variant="tertiary" size="sm">Group</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="tertiary">Default</twig:Button>
+        <twig:Button variant="tertiary">Button</twig:Button>
+        <twig:Button variant="tertiary">Group</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="tertiary" size="lg">Large</twig:Button>
+        <twig:Button variant="tertiary" size="lg">Button</twig:Button>
+        <twig:Button variant="tertiary" size="lg">Group</twig:Button>
+    </twig:ButtonGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col items-start gap-8">
+    <div role="group" data-orientation="horizontal" class="inline-flex rounded-base shadow-xs -space-x-px [&amp;&gt;*]:rounded-none [&amp;&gt;*:first-child]:rounded-s-base [&amp;&gt;*:last-child]:rounded-e-base">
+<button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-3 py-2 rounded-base">Small</button>
+        <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-3 py-2 rounded-base">Button</button>
+        <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-3 py-2 rounded-base">Group</button>
+    </div>
+    <div role="group" data-orientation="horizontal" class="inline-flex rounded-base shadow-xs -space-x-px [&amp;&gt;*]:rounded-none [&amp;&gt;*:first-child]:rounded-s-base [&amp;&gt;*:last-child]:rounded-e-base">
+<button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Default</button>
+        <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Button</button>
+        <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Group</button>
+    </div>
+    <div role="group" data-orientation="horizontal" class="inline-flex rounded-base shadow-xs -space-x-px [&amp;&gt;*]:rounded-none [&amp;&gt;*:first-child]:rounded-s-base [&amp;&gt;*:last-child]:rounded-e-base">
+<button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-base px-5 py-3 rounded-base">Large</button>
+        <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-base px-5 py-3 rounded-base">Button</button>
+        <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-base px-5 py-3 rounded-base">Group</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Usage.html__1.html
new file mode 100644
index 00000000000..206dd8ff7d8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Usage.html__1.html	
@@ -0,0 +1,15 @@
+<!--
+- Kit: Flowbite v4
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup>
+    <twig:Button variant="tertiary">One</twig:Button>
+    <twig:Button variant="tertiary">Two</twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-orientation="horizontal" class="inline-flex rounded-base shadow-xs -space-x-px [&amp;&gt;*]:rounded-none [&amp;&gt;*:first-child]:rounded-s-base [&amp;&gt;*:last-child]:rounded-e-base">
+<button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">One</button>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base">Two</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Demo.html__1.html
new file mode 100644
index 00000000000..9576b0875d1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Demo.html__1.html	
@@ -0,0 +1,25 @@
+<!--
+- Kit: Flowbite v4
+- Component: Card
+- Code:
+```twig
+<twig:Card class="max-w-sm">
+    <twig:Card:Header>
+        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </twig:Card:Content>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs max-w-sm">
+<div class="pb-6">
+<h5 class="text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
+    </div>
+
+    <div>
+<p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Form.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Form.html__1.html
new file mode 100644
index 00000000000..096dd83ba58
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Form.html__1.html	
@@ -0,0 +1,76 @@
+<!--
+- Kit: Flowbite v4
+- Component: Card
+- Code:
+```twig
+<twig:Card class="w-full max-w-sm">
+    <twig:Card:Header>
+        <twig:Card:Title as="h5">Sign in to our platform</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <div class="mb-4">
+            <twig:Label for="email" class="mb-2.5">Your email</twig:Label>
+            <twig:Input type="email" id="email" placeholder="example@company.com" required />
+        </div>
+
+        <div>
+            <twig:Label for="password" class="mb-2.5">Your password</twig:Label>
+            <twig:Input type="password" id="password" placeholder="•••••••••" required />
+        </div>
+
+        <div class="flex items-start mt-6">
+            <div class="flex items-center">
+                <twig:Checkbox id="checkbox-remember" value="" />
+                <twig:Label for="checkbox-remember" class="ms-2">Remember me</twig:Label>
+            </div>
+            <a href="#" class="ms-auto text-sm font-medium text-fg-brand hover:underline">Lost Password?</a>
+        </div>
+    </twig:Card:Content>
+
+    <twig:Card:Footer>
+        <twig:Button type="submit" class="w-full mb-3">
+            Login to your account
+        </twig:Button>
+
+        <div class="text-sm font-medium text-body">Not registered? <a href="#" class="text-fg-brand hover:underline">Create account</a></div>
+    </twig:Card:Footer>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs w-full max-w-sm">
+<div class="pb-6">
+<h5 class="text-2xl font-semibold tracking-tight text-heading leading-8">Sign in to our platform</h5>
+    </div>
+
+    <div>
+<div class="mb-4">
+            <label class="block text-sm font-medium text-heading mb-2.5" for="email">Your email</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="email" id="email" placeholder="example@company.com" required>
+
+        </div>
+
+        <div>
+            <label class="block text-sm font-medium text-heading mb-2.5" for="password">Your password</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="password" id="password" placeholder="&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;" required>
+
+        </div>
+
+        <div class="flex items-start mt-6">
+            <div class="flex items-center">
+                <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand" id="checkbox-remember" value="">
+
+                <label class="block text-sm font-medium text-heading ms-2" for="checkbox-remember">Remember me</label>
+            </div>
+            <a href="#" class="ms-auto text-sm font-medium text-fg-brand hover:underline">Lost Password?</a>
+        </div>
+    </div>
+
+    <div class="pt-6">
+<button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base w-full mb-3" type="submit">Login to your account
+        </button>
+
+        <div class="text-sm font-medium text-body">Not registered? <a href="#" class="text-fg-brand hover:underline">Create account</a>
+</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Usage.html__1.html
new file mode 100644
index 00000000000..84b331cf95f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Usage.html__1.html	
@@ -0,0 +1,29 @@
+<!--
+- Kit: Flowbite v4
+- Component: Card
+- Code:
+```twig
+<twig:Card>
+    <twig:Card:Header>
+        <twig:Card:Title>Card Title</twig:Card:Title>
+    </twig:Card:Header>
+    <twig:Card:Content>
+        <p>Card Content</p>
+    </twig:Card:Content>
+    <twig:Card:Footer>
+        <p>Card Footer</p>
+    </twig:Card:Footer>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs">
+<div class="pb-6">
+<span class="text-2xl font-semibold tracking-tight text-heading leading-8">Card Title</span>
+    </div>
+    <div>
+<p>Card Content</p>
+    </div>
+    <div class="pt-6">
+<p>Card Footer</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With Button.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With Button.html__1.html
new file mode 100644
index 00000000000..f26bcec4f6e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With Button.html__1.html	
@@ -0,0 +1,38 @@
+<!--
+- Kit: Flowbite v4
+- Component: Card
+- Code:
+```twig
+<twig:Card class="max-w-sm">
+    <twig:Card:Header>
+        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </twig:Card:Content>
+
+    <twig:Card:Footer>
+        <twig:Button as="a" href="#">
+            Read more
+            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
+        </twig:Button>
+    </twig:Card:Footer>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs max-w-sm">
+<div class="pb-6">
+<h5 class="text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
+    </div>
+
+    <div>
+<p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </div>
+
+    <div class="pt-6">
+<a class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" href="#">Read more
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0l-4 4m4-4l-4-4"></path></svg>
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With image.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With image.html__1.html
new file mode 100644
index 00000000000..4b63505db03
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With image.html__1.html	
@@ -0,0 +1,59 @@
+<!--
+- Kit: Flowbite v4
+- Component: Card
+- Code:
+```twig
+<twig:Card class="max-w-sm">
+    <twig:Card:Header>
+        <a href="#">
+            <img
+                class="rounded-base"
+                src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+                alt="Bukchon Hanok Village by Y K" />
+        </a>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <twig:Badge border="bordered" class="mb-2">
+            <twig:ux:icon name="flowbite:fire-outline" class="w-3 h-3 me-1" aria-hidden="true"/>
+            Trending
+        </twig:Badge>
+        <a href="#">
+            <twig:Card:Title class="mb-2" as="h5">Streamlining your design process today.</twig:Card:Title>
+        </a>
+        <p>In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.</p>
+    </twig:Card:Content>
+
+    <twig:Card:Footer>
+        <twig:Button variant="secondary" as="a" href="#">
+            Read more
+            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
+        </twig:Button>
+    </twig:Card:Footer>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs max-w-sm">
+<div class="pb-6">
+<a href="#">
+            <img class="rounded-base" src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;w=1000" alt="Bukchon Hanok Village by Y K">
+        </a>
+    </div>
+
+    <div>
+<div class="inline-flex items-center justify-center font-medium bg-brand-softer text-fg-brand-strong border-brand-subtle [a&amp;]:hover:bg-brand-soft px-1.5 py-0.5 text-xs rounded border mb-2">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-3 h-3 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.122 17.645a7.2 7.2 0 0 1-2.656 2.495a7.06 7.06 0 0 1-3.52.853a6.6 6.6 0 0 1-3.306-.718a6.73 6.73 0 0 1-2.54-2.266c-2.672-4.57.287-8.846.887-9.668A4.45 4.45 0 0 0 8.07 6.31A4.5 4.5 0 0 0 7.997 4c1.284.965 6.43 3.258 5.525 10.631c1.496-1.136 2.7-3.046 2.846-6.216c1.43 1.061 3.985 5.462 1.754 9.23"></path></svg>
+            Trending
+        </div>
+        <a href="#">
+            <h5 class="text-2xl font-semibold tracking-tight text-heading leading-8 mb-2">Streamlining your design process today.</h5>
+        </a>
+        <p>In today&acirc;&#128;&#153;s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.</p>
+    </div>
+
+    <div class="pt-6">
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" href="#">Read more
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0l-4 4m4-4l-4-4"></path></svg>
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Bordered.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Bordered.html__1.html
new file mode 100644
index 00000000000..c68a04d13ef
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Bordered.html__1.html	
@@ -0,0 +1,55 @@
+<!--
+- Kit: Flowbite v4
+- Component: Checkbox
+- Code:
+```twig
+<div class="grid gap-6 md:grid-cols-2">
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
+                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
+            </div>
+            <twig:Checkbox id="default" class="mt-4 me-4"/>
+        </twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
+                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
+            </div>
+            <twig:Checkbox id="checked" class="mt-4 me-4" checked/>
+        </twig:Label>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid gap-6 md:grid-cols-2">
+
+    <div class="flex items-center mb-4">
+        <label class="text-sm font-medium text-heading flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs" for="default"><div class="p-4">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-7 h-7 text-body mb-1.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1M5 12h14M5 12a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1m-2 3h.01M14 15h.01M17 9h.01M14 9h.01"></path></svg>
+                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
+                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
+            </div>
+            <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand mt-4 me-4" id="default">
+
+        </label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <label class="text-sm font-medium text-heading flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs" for="checked"><div class="p-4">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-7 h-7 text-body mb-1.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 6c0 1.657-3.134 3-7 3S5 7.657 5 6m14 0c0-1.657-3.134-3-7-3S5 4.343 5 6m14 0v6M5 6v6m0 0c0 1.657 3.134 3 7 3s7-1.343 7-3M5 12v6c0 1.657 3.134 3 7 3s7-1.343 7-3v-6"></path></svg>
+                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
+                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
+            </div>
+            <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand mt-4 me-4" id="checked" checked>
+
+        </label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Demo.html__1.html
new file mode 100644
index 00000000000..8cc3836e55a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Demo.html__1.html	
@@ -0,0 +1,31 @@
+<!--
+- Kit: Flowbite v4
+- Component: Checkbox
+- Code:
+```twig
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="default"/>
+        <twig:Label for="default" class="select-none ms-2 font-medium">Default checkbox</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="checked" checked/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand" id="default">
+
+        <label class="block text-sm font-medium text-heading select-none ms-2" for="default">Default checkbox</label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand" id="checked" checked>
+
+        <label class="block text-sm font-medium text-heading select-none ms-2" for="checked">Checked state</label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Disabled.html__1.html
new file mode 100644
index 00000000000..aed943563b9
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Disabled.html__1.html	
@@ -0,0 +1,31 @@
+<!--
+- Kit: Flowbite v4
+- Component: Checkbox
+- Code:
+```twig
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="default" disabled/>
+        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default checkbox</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Checkbox id="checked" checked disabled/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand" id="default" disabled>
+
+        <label class="block text-sm font-medium select-none ms-2 text-fg-disabled" for="default">Default checkbox</label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand" id="checked" checked disabled>
+
+        <label class="block text-sm font-medium select-none ms-2 text-fg-disabled" for="checked">Checked state</label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Usage.html__1.html
new file mode 100644
index 00000000000..b92ac89ef31
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Checkbox
+- Code:
+```twig
+<twig:Checkbox />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<input type="checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft disabled:border-light accent-brand">
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Count.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Count.html__1.html
new file mode 100644
index 00000000000..2055774fe11
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Count.html__1.html	
@@ -0,0 +1,18 @@
+<!--
+- Kit: Flowbite v4
+- Component: Indicator
+- Code:
+```twig
+<twig:Button class="relative">
+    <twig:ux:icon name="flowbite:inbox-full-outline" class="size-4 me-1.5 -ms-0.5" aria-hidden="true" />
+    <span class="sr-only">Notifications</span>
+    Messages
+    <twig:Indicator variant="danger" size="lg" class="absolute -top-2 -end-2 border-2 border-buffer">8</twig:Indicator>
+</twig:Button>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base relative"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4 me-1.5 -ms-0.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 13h3.439a.99.99 0 0 1 .908.6a3.978 3.978 0 0 0 7.306 0a.99.99 0 0 1 .908-.6H20M4 13v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6M4 13l2-9h12l2 9M9 7h6m-7 3h8"></path></svg>
+    <span class="sr-only">Notifications</span>
+    Messages
+    <span class="inline-flex items-center justify-center text-xs font-bold rounded-full bg-danger text-white size-6 absolute -top-2 -end-2 border-2 border-buffer">8</span>
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Demo.html__1.html
new file mode 100644
index 00000000000..7130a5b763a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Demo.html__1.html	
@@ -0,0 +1,26 @@
+<!--
+- Kit: Flowbite v4
+- Component: Indicator
+- Code:
+```twig
+<div class="flex justify-center gap-4">
+    <twig:Indicator variant="brand" />
+    <twig:Indicator variant="gray" />
+    <twig:Indicator variant="danger" />
+    <twig:Indicator variant="success" />
+    <twig:Indicator variant="warning" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex justify-center gap-4">
+    <span class="inline-flex items-center justify-center text-xs font-bold rounded-full bg-brand text-white size-3"></span>
+
+    <span class="inline-flex items-center justify-center text-xs font-bold rounded-full bg-neutral-quaternary text-heading size-3"></span>
+
+    <span class="inline-flex items-center justify-center text-xs font-bold rounded-full bg-danger text-white size-3"></span>
+
+    <span class="inline-flex items-center justify-center text-xs font-bold rounded-full bg-success text-white size-3"></span>
+
+    <span class="inline-flex items-center justify-center text-xs font-bold rounded-full bg-warning text-white size-3"></span>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Usage.html__1.html
new file mode 100644
index 00000000000..0531d2daa48
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Usage.html__1.html	
@@ -0,0 +1,14 @@
+<!--
+- Kit: Flowbite v4
+- Component: Indicator
+- Code:
+```twig
+<twig:Indicator
+    variant="brand | gray | danger | success | warning"
+>
+    Value
+</twig:Indicator>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<span class="inline-flex items-center justify-center text-xs font-bold rounded-full size-3">Value
+</span>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Demo.html__1.html
new file mode 100644
index 00000000000..7257d4b370f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Demo.html__1.html	
@@ -0,0 +1,98 @@
+<!--
+- Kit: Flowbite v4
+- Component: Input
+- Code:
+```twig
+<form>
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+        <div>
+            <twig:Label for="first_name">First name</twig:Label>
+            <twig:Input id="first_name" type="text" placeholder="John" required />
+        </div>
+        <div>
+            <twig:Label for="last_name">Last name</twig:Label>
+            <twig:Input id="last_name" type="text" placeholder="Doe" required />
+        </div>
+        <div>
+            <twig:Label for="company">Company</twig:Label>
+            <twig:Input id="company" type="text" placeholder="Flowbite" required />
+        </div>
+        <div>
+            <twig:Label for="phone">Phone number</twig:Label>
+            <twig:Input id="phone" type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required />
+        </div>
+        <div>
+            <twig:Label for="website">Website URL</twig:Label>
+            <twig:Input id="website" type="url" placeholder="flowbite.com" required />
+        </div>
+        <div>
+            <twig:Label for="visitors">Unique visitors (per month)</twig:Label>
+            <twig:Input id="visitors" type="number" required />
+        </div>
+    </div>
+    <div class="mb-6">
+        <twig:Label for="email">Email address</twig:Label>
+        <twig:Input type="email" id="email" placeholder="john.doe@company.com" required />
+    </div>
+    <div class="mb-6">
+        <twig:Label for="password">Password</twig:Label>
+        <twig:Input type="password" id="password" placeholder="•••••••••" required />
+    </div>
+    <div class="mb-6">
+        <twig:Label for="confirm_password">Confirm password</twig:Label>
+        <twig:Input type="password" id="confirm_password" placeholder="•••••••••" required />
+    </div>
+    <twig:Button type="submit">Submit</twig:Button>
+</form>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<form>
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+        <div>
+            <label class="block text-sm font-medium text-heading" for="first_name">First name</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="first_name" type="text" placeholder="John" required>
+
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-heading" for="last_name">Last name</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="last_name" type="text" placeholder="Doe" required>
+
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-heading" for="company">Company</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="company" type="text" placeholder="Flowbite" required>
+
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-heading" for="phone">Phone number</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="phone" type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
+
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-heading" for="website">Website URL</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="website" type="url" placeholder="flowbite.com" required>
+
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-heading" for="visitors">Unique visitors (per month)</label>
+            <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="visitors" type="number" required>
+
+        </div>
+    </div>
+    <div class="mb-6">
+        <label class="block text-sm font-medium text-heading" for="email">Email address</label>
+        <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="email" id="email" placeholder="john.doe@company.com" required>
+
+    </div>
+    <div class="mb-6">
+        <label class="block text-sm font-medium text-heading" for="password">Password</label>
+        <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="password" id="password" placeholder="&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;" required>
+
+    </div>
+    <div class="mb-6">
+        <label class="block text-sm font-medium text-heading" for="confirm_password">Confirm password</label>
+        <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="password" id="confirm_password" placeholder="&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;&acirc;&#128;&cent;" required>
+
+    </div>
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" type="submit">Submit</button>
+</form>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Disabled.html__1.html
new file mode 100644
index 00000000000..0a17cd678a8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Disabled.html__1.html	
@@ -0,0 +1,17 @@
+<!--
+- Kit: Flowbite v4
+- Component: Input
+- Code:
+```twig
+<div class="space-y-6">
+    <twig:Input type="text" value="Disabled input" disabled class="max-w-sm" />
+    <twig:Input type="text" value="Disabled readonly input" disabled readonly class="max-w-sm" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-y-6">
+    <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong max-w-sm" type="text" value="Disabled input" disabled>
+
+    <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong max-w-sm" type="text" value="Disabled readonly input" disabled readonly>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file File.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file File.html__1.html
new file mode 100644
index 00000000000..3b9e0f0c06b
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file File.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Input
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="picture">Picture</twig:Label>
+    <twig:Input type="file" id="picture" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <label class="block text-sm font-medium text-heading" for="picture">Picture</label>
+    <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="file" id="picture">
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Invalid.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Invalid.html__1.html
new file mode 100644
index 00000000000..be471311005
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Invalid.html__1.html	
@@ -0,0 +1,18 @@
+<!--
+- Kit: Flowbite v4
+- Component: Input
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="text" variant="invalid">Your name</twig:Label>
+    <twig:Input type="text" id="text" aria-invalid="true" placeholder="Error input" />
+    <p class="text-sm text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <label class="block text-sm font-medium text-fg-danger-strong" for="text">Your name</label>
+    <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" type="text" id="text" aria-invalid="true" placeholder="Error input">
+
+    <p class="text-sm text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Usage.html__1.html
new file mode 100644
index 00000000000..ac80ed0a8c3
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Input
+- Code:
+```twig
+<twig:Input />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong">
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file With Button.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file With Button.html__1.html
new file mode 100644
index 00000000000..2b6c854e3d9
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file With Button.html__1.html	
@@ -0,0 +1,21 @@
+<!--
+- Kit: Flowbite v4
+- Component: Input
+- Code:
+```twig
+<div class="relative inline-flex">
+    <twig:Input type="text" id="text" placeholder="Search..." class="rounded-e-none" />
+    <twig:Button type="button" size="sm" class="rounded-s-0">
+        <twig:ux:icon name="tabler:search" class="size-4 me-1" aria-hidden="true" />
+        Search
+    </twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative inline-flex">
+    <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong rounded-e-none" type="text" id="text" placeholder="Search...">
+
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-3 py-2 rounded-base rounded-s-0" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4 me-1" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"></path></svg>
+        Search
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Arrow.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Arrow.html__1.html
new file mode 100644
index 00000000000..9a5ff9442b2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Arrow.html__1.html	
@@ -0,0 +1,45 @@
+<!--
+- Kit: Flowbite v4
+- Component: Kbd
+- Code:
+```twig
+<div>
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-up-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key up</span>
+    </twig:Kbd>
+
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-down-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key down</span>
+    </twig:Kbd>
+
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-left-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key left</span>
+    </twig:Kbd>
+
+    <twig:Kbd>
+        <twig:ux:icon name="flowbite:caret-right-solid" class="h-3 w-3" aria-hidden="true" />
+        <span class="sr-only">Arrow key right</span>
+    </twig:Kbd>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M5.575 13.729C4.501 15.033 5.43 17 7.12 17h9.762c1.69 0 2.618-1.967 1.544-3.271l-4.881-5.927a2 2 0 0 0-3.088 0l-4.88 5.927Z" clip-rule="evenodd"></path></svg>
+        <span class="sr-only">Arrow key up</span>
+    </kbd>
+
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0z" clip-rule="evenodd"></path></svg>
+        <span class="sr-only">Arrow key down</span>
+    </kbd>
+
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M13.729 5.575c1.304-1.074 3.27-.146 3.27 1.544v9.762c0 1.69-1.966 2.618-3.27 1.544l-5.927-4.881a2 2 0 0 1 0-3.088z" clip-rule="evenodd"></path></svg>
+        <span class="sr-only">Arrow key left</span>
+    </kbd>
+
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-3 w-3" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z" clip-rule="evenodd"></path></svg>
+        <span class="sr-only">Arrow key right</span>
+    </kbd>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Demo.html__1.html
new file mode 100644
index 00000000000..8b65ceb349d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Demo.html__1.html	
@@ -0,0 +1,25 @@
+<!--
+- Kit: Flowbite v4
+- Component: Kbd
+- Code:
+```twig
+<div>
+    <twig:Kbd>Shift</twig:Kbd>
+    <twig:Kbd>Ctrl</twig:Kbd>
+    <twig:Kbd>Tab</twig:Kbd>
+    <twig:Kbd>Caps Lock</twig:Kbd>
+    <twig:Kbd>Esc</twig:Kbd>
+    <twig:Kbd>Spacebar</twig:Kbd>
+    <twig:Kbd>Enter</twig:Kbd>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Shift</kbd>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Ctrl</kbd>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Tab</kbd>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Caps Lock</kbd>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Esc</kbd>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Spacebar</kbd>
+    <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Enter</kbd>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Usage.html__1.html
new file mode 100644
index 00000000000..b0ef33b079d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Kbd
+- Code:
+```twig
+<twig:Kbd>Ctrl</twig:Kbd>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Ctrl</kbd>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Demo.html__1.html
new file mode 100644
index 00000000000..e0aba68ff8f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Demo.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Label
+- Code:
+```twig
+<div>
+    <twig:Label for="text">Company</twig:Label>
+    <twig:Input id="text" type="text" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div>
+    <label class="block text-sm font-medium text-heading" for="text">Company</label>
+    <input class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body [&amp;:disabled:not([readonly])]:text-fg-disabled aria-invalid:bg-danger-soft aria-invalid:border-danger-subtle aria-invalid:text-fg-danger-strong aria-invalid:focus:ring-danger aria-invalid:focus:border-danger aria-invalid:placeholder:text-fg-danger-strong" id="text" type="text">
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Usage.html__1.html
new file mode 100644
index 00000000000..cb4723f8fdc
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Label
+- Code:
+```twig
+<twig:Label for="email">Your email address</twig:Label>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<label class="block text-sm font-medium text-heading" for="email">Your email address</label>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Demo.html__1.html
new file mode 100644
index 00000000000..a68a0bcdff2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Demo.html__1.html	
@@ -0,0 +1,57 @@
+<!--
+- Kit: Flowbite v4
+- Component: Modal
+- Code:
+```twig
+<twig:Modal id="delete_account">
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content>
+        <twig:Modal:Header>
+            <twig:Modal:Title>Edit profile</twig:Modal:Title>
+        </twig:Modal:Header>
+
+        <twig:Modal:Body>
+            <p class="leading-relaxed text-body">
+                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+            </p>
+            <p class="leading-relaxed text-body">
+                The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+            </p>
+        </twig:Modal:Body>
+
+        <twig:Modal:Footer>
+            <twig:Button type="submit">I accept</twig:Button>
+            <twig:Modal:Close>
+                <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
+            </twig:Modal:Close>
+        </twig:Modal:Footer>
+    </twig:Modal:Content>
+</twig:Modal>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="modal" aria-labelledby="modal-delete_account-title">
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#open" data-modal-target="trigger" aria-haspopup="dialog">Open Modal</button>
+    
+    <dialog id="modal-delete_account" tabindex="-1" aria-hidden="true" class="relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70" data-modal-target="modal" data-action="keydown.esc-&gt;modal#close:prevent click-&gt;modal#closeOnClickOutside"><header class="flex items-center justify-between border-b border-default pb-4 md:pb-5"><h3 id="modal-delete_account-title" class="text-lg font-medium text-heading">Edit profile</h3>
+        </header>
+
+        <div class="space-y-4 md:space-y-6 py-4 md:py-6">
+<p class="leading-relaxed text-body">
+                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+            </p>
+            <p class="leading-relaxed text-body">
+                The European Union&acirc;&#128;&#153;s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+            </p>
+        </div>
+
+        <footer class="flex items-center border-t border-default space-x-4 pt-4 md:pt-5"><button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" type="submit">I accept</button>
+            <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#close">Decline</button>
+                    </footer>
+            <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none w-8 h-8 rounded-base absolute top-4 right-4" type="button" data-action="click-&gt;modal#close"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+            <span class="sr-only">Close</span>
+        </button>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Opened by default.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Opened by default.html__1.html
new file mode 100644
index 00000000000..8268a4f2732
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Opened by default.html__1.html	
@@ -0,0 +1,57 @@
+<!--
+- Kit: Flowbite v4
+- Component: Modal
+- Code:
+```twig
+<twig:Modal id="delete_account" open>
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content>
+        <twig:Modal:Header>
+            <twig:Modal:Title>Edit profile</twig:Modal:Title>
+        </twig:Modal:Header>
+
+        <twig:Modal:Body>
+            <p class="leading-relaxed text-body">
+                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+            </p>
+            <p class="leading-relaxed text-body">
+                The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+            </p>
+        </twig:Modal:Body>
+
+        <twig:Modal:Footer>
+            <twig:Button type="submit">I accept</twig:Button>
+            <twig:Modal:Close>
+                <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
+            </twig:Modal:Close>
+        </twig:Modal:Footer>
+    </twig:Modal:Content>
+</twig:Modal>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="modal" data-modal-open-value aria-labelledby="modal-delete_account-title">
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#open" data-modal-target="trigger" aria-haspopup="dialog">Open Modal</button>
+    
+    <dialog id="modal-delete_account" tabindex="-1" aria-hidden="true" class="relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70" data-modal-target="modal" data-action="keydown.esc-&gt;modal#close:prevent click-&gt;modal#closeOnClickOutside"><header class="flex items-center justify-between border-b border-default pb-4 md:pb-5"><h3 id="modal-delete_account-title" class="text-lg font-medium text-heading">Edit profile</h3>
+        </header>
+
+        <div class="space-y-4 md:space-y-6 py-4 md:py-6">
+<p class="leading-relaxed text-body">
+                With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+            </p>
+            <p class="leading-relaxed text-body">
+                The European Union&acirc;&#128;&#153;s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+            </p>
+        </div>
+
+        <footer class="flex items-center border-t border-default space-x-4 pt-4 md:pt-5"><button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" type="submit">I accept</button>
+            <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#close">Decline</button>
+                    </footer>
+            <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none w-8 h-8 rounded-base absolute top-4 right-4" type="button" data-action="click-&gt;modal#close"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+            <span class="sr-only">Close</span>
+        </button>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Popup.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Popup.html__1.html
new file mode 100644
index 00000000000..125ec332e9a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Popup.html__1.html	
@@ -0,0 +1,49 @@
+<!--
+- Kit: Flowbite v4
+- Component: Modal
+- Code:
+```twig
+<twig:Modal id="share_link">
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline-danger" {{ ...modal_trigger_attrs }}>Delete</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content class="sm:max-w-md" :showCloseButton="false">
+
+        <twig:Modal:Body class="text-center">
+            <twig:ux:icon name="flowbite:exclamation-circle-outline" class="mx-auto size-12 text-fg-disabled" aria-hidden="true" />
+            <twig:Modal:Title>Are you sure you want to delete this product from your account?</twig:Modal:Title>
+            <div class="flex items-center space-x-4 justify-center">
+                <twig:Button variant="danger">
+                    Yes, I'm sure
+                </twig:Button>
+
+                <twig:Modal:Close>
+                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>
+                        No, cancel
+                    </twig:Button>
+                </twig:Modal:Close>
+            </div>
+        </twig:Modal:Body>
+
+    </twig:Modal:Content>
+</twig:Modal>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="modal" aria-labelledby="modal-share_link-title">
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-danger bg-neutral-primary border-danger hover:bg-danger hover:text-white focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#open" data-modal-target="trigger" aria-haspopup="dialog">Delete</button>
+    
+    <dialog id="modal-share_link" tabindex="-1" aria-hidden="true" class="relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70 sm:max-w-md" data-modal-target="modal" data-action="keydown.esc-&gt;modal#close:prevent click-&gt;modal#closeOnClickOutside"><div class="space-y-4 md:space-y-6 py-4 md:py-6 text-center">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="mx-auto size-12 text-fg-disabled" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+            <h3 id="modal-share_link-title" class="text-lg font-medium text-heading">Are you sure you want to delete this product from your account?</h3>
+            <div class="flex items-center space-x-4 justify-center">
+                <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-danger hover:bg-danger-strong focus:ring-danger-medium text-sm px-4 py-2.5 rounded-base">Yes, I'm sure
+                </button>
+
+                <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#close">No, cancel
+                    </button>
+                            </div>
+        </div>
+
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Static.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Static.html__1.html
new file mode 100644
index 00000000000..6c90fbf40d7
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Static.html__1.html	
@@ -0,0 +1,51 @@
+<!--
+- Kit: Flowbite v4
+- Component: Modal
+- Code:
+```twig
+<twig:Modal id="delete_account">
+    <twig:Modal:Trigger>
+        <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
+    </twig:Modal:Trigger>
+
+    <twig:Modal:Content class="max-w-[600px]" backdrop="static">
+        <twig:Modal:Header>
+            <twig:Modal:Title>Edit profile</twig:Modal:Title>
+        </twig:Modal:Header>
+
+        <twig:Modal:Body>
+            <p class="leading-relaxed text-body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat, velit sit amet interdum auctor, ligula lorem posuere urna, ut lobortis odio odio et leo. Nam scelerisque vel sem vel pulvinar.
+            </p>
+        </twig:Modal:Body>
+
+        <twig:Modal:Footer>
+            <twig:Button type="submit">I accept</twig:Button>
+            <twig:Modal:Close>
+                <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
+            </twig:Modal:Close>
+        </twig:Modal:Footer>
+    </twig:Modal:Content>
+</twig:Modal>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="modal" aria-labelledby="modal-delete_account-title">
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#open" data-modal-target="trigger" aria-haspopup="dialog">Open Modal</button>
+    
+    <dialog id="modal-delete_account" tabindex="-1" aria-hidden="true" class="relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70 max-w-[600px]" data-modal-target="modal" data-action="keydown.esc-&gt;modal#close:prevent "><header class="flex items-center justify-between border-b border-default pb-4 md:pb-5"><h3 id="modal-delete_account-title" class="text-lg font-medium text-heading">Edit profile</h3>
+        </header>
+
+        <div class="space-y-4 md:space-y-6 py-4 md:py-6">
+<p class="leading-relaxed text-body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat, velit sit amet interdum auctor, ligula lorem posuere urna, ut lobortis odio odio et leo. Nam scelerisque vel sem vel pulvinar.
+            </p>
+        </div>
+
+        <footer class="flex items-center border-t border-default space-x-4 pt-4 md:pt-5"><button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" type="submit">I accept</button>
+            <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#close">Decline</button>
+                    </footer>
+            <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none w-8 h-8 rounded-base absolute top-4 right-4" type="button" data-action="click-&gt;modal#close"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+            <span class="sr-only">Close</span>
+        </button>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Usage.html__1.html
new file mode 100644
index 00000000000..83b6c654039
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Usage.html__1.html	
@@ -0,0 +1,26 @@
+<!--
+- Kit: Flowbite v4
+- Component: Modal
+- Code:
+```twig
+<twig:Modal id="delete_account">
+    <twig:Modal:Trigger>
+        <twig:Button {{ ...modal_trigger_attrs }}>Open</twig:Button>
+    </twig:Modal:Trigger>
+    <twig:Modal:Content>
+        <twig:Modal:Header>
+            <twig:Modal:Title>Are you absolutely sure?</twig:Modal:Title>
+        </twig:Modal:Header>
+    </twig:Modal:Content>
+</twig:Modal>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="modal" aria-labelledby="modal-delete_account-title">
+    <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" data-action="click-&gt;modal#open" data-modal-target="trigger" aria-haspopup="dialog">Open</button>
+        <dialog id="modal-delete_account" tabindex="-1" aria-hidden="true" class="relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70" data-modal-target="modal" data-action="keydown.esc-&gt;modal#close:prevent click-&gt;modal#closeOnClickOutside"><header class="flex items-center justify-between border-b border-default pb-4 md:pb-5"><h3 id="modal-delete_account-title" class="text-lg font-medium text-heading">Are you absolutely sure?</h3>
+        </header>
+            <button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none w-8 h-8 rounded-base absolute top-4 right-4" type="button" data-action="click-&gt;modal#close"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"></path></svg>
+            <span class="sr-only">Close</span>
+        </button>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Demo.html__1.html
new file mode 100644
index 00000000000..bddfe04ca79
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Demo.html__1.html	
@@ -0,0 +1,48 @@
+<!--
+- Kit: Flowbite v4
+- Component: Pagination
+- Code:
+```twig
+<twig:Pagination>
+    <twig:Pagination:Content>
+        <twig:Pagination:Item>
+            <twig:Pagination:Previous href="#" />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Next href="#" />
+        </twig:Pagination:Item>
+    </twig:Pagination:Content>
+</twig:Pagination>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<nav class="flex items-center space-x-4" role="navigation"><ul class="flex -space-x-px text-sm rounded-base [&amp;_a]:h-10 [&amp;_*]:rounded-none [&amp;&gt;*:first-child]:[&amp;_*]:rounded-s-base [&amp;&gt;*:last-child]:[&amp;_*]:rounded-e-base">
+<li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" href="#" aria-label="Go to previous page">        <span>Previous</span>
+    </a>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#">1</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base text-fg-brand bg-neutral-tertiary-medium" aria-current="page" href="#">2</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#">3</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" href="#" aria-label="Go to next page">        <span>Next</span>
+    </a>
+
+        </li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Icon.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Icon.html__1.html
new file mode 100644
index 00000000000..f5fb69082a0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Icon.html__1.html	
@@ -0,0 +1,48 @@
+<!--
+- Kit: Flowbite v4
+- Component: Pagination
+- Code:
+```twig
+<twig:Pagination>
+    <twig:Pagination:Content>
+        <twig:Pagination:Item>
+            <twig:Pagination:Previous asIcon href="#" />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Next asIcon href="#" />
+        </twig:Pagination:Item>
+    </twig:Pagination:Content>
+</twig:Pagination>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<nav class="flex items-center space-x-4" role="navigation"><ul class="flex -space-x-px text-sm rounded-base [&amp;_a]:h-10 [&amp;_*]:rounded-none [&amp;&gt;*:first-child]:[&amp;_*]:rounded-s-base [&amp;&gt;*:last-child]:[&amp;_*]:rounded-e-base">
+<li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#" aria-label="Go to previous page">        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14 8l-4 4l4 4"></path></svg>
+    </a>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#">1</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base text-fg-brand bg-neutral-tertiary-medium" aria-current="page" href="#">2</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#">3</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#" aria-label="Go to next page">        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16l4-4l-4-4"></path></svg>
+    </a>
+
+        </li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Usage.html__1.html
new file mode 100644
index 00000000000..bddfe04ca79
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Usage.html__1.html	
@@ -0,0 +1,48 @@
+<!--
+- Kit: Flowbite v4
+- Component: Pagination
+- Code:
+```twig
+<twig:Pagination>
+    <twig:Pagination:Content>
+        <twig:Pagination:Item>
+            <twig:Pagination:Previous href="#" />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Next href="#" />
+        </twig:Pagination:Item>
+    </twig:Pagination:Content>
+</twig:Pagination>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<nav class="flex items-center space-x-4" role="navigation"><ul class="flex -space-x-px text-sm rounded-base [&amp;_a]:h-10 [&amp;_*]:rounded-none [&amp;&gt;*:first-child]:[&amp;_*]:rounded-s-base [&amp;&gt;*:last-child]:[&amp;_*]:rounded-e-base">
+<li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" href="#" aria-label="Go to previous page">        <span>Previous</span>
+    </a>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#">1</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base text-fg-brand bg-neutral-tertiary-medium" aria-current="page" href="#">2</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary w-10 h-10 rounded-base" href="#">3</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary text-sm px-4 py-2.5 rounded-base" href="#" aria-label="Go to next page">        <span>Next</span>
+    </a>
+
+        </li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Bordered.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Bordered.html__1.html
new file mode 100644
index 00000000000..bdc5beeb9dd
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Bordered.html__1.html	
@@ -0,0 +1,55 @@
+<!--
+- Kit: Flowbite v4
+- Component: Radio
+- Code:
+```twig
+<div class="grid gap-6 md:grid-cols-2">
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
+                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
+            </div>
+            <twig:Radio id="default" value="default" class="mt-4 me-4" name="radio-bordered"/>
+        </twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
+            <div class="p-4">
+                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
+                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
+                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
+            </div>
+            <twig:Radio id="checked" value="checked" class="mt-4 me-4" name="radio-bordered" checked/>
+        </twig:Label>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid gap-6 md:grid-cols-2">
+
+    <div class="flex items-center mb-4">
+        <label class="text-sm font-medium text-heading flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs" for="default"><div class="p-4">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-7 h-7 text-body mb-1.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1M5 12h14M5 12a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1m-2 3h.01M14 15h.01M17 9h.01M14 9h.01"></path></svg>
+                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
+                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
+            </div>
+            <input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none mt-4 me-4" id="default" value="default" name="radio-bordered">
+
+        </label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <label class="text-sm font-medium text-heading flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs" for="checked"><div class="p-4">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-7 h-7 text-body mb-1.5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 6c0 1.657-3.134 3-7 3S5 7.657 5 6m14 0c0-1.657-3.134-3-7-3S5 4.343 5 6m14 0v6M5 6v6m0 0c0 1.657 3.134 3 7 3s7-1.343 7-3M5 12v6c0 1.657 3.134 3 7 3s7-1.343 7-3v-6"></path></svg>
+                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
+                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
+            </div>
+            <input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none mt-4 me-4" id="checked" value="checked" name="radio-bordered" checked>
+
+        </label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Demo.html__1.html
new file mode 100644
index 00000000000..32d68eaf2b3
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Demo.html__1.html	
@@ -0,0 +1,31 @@
+<!--
+- Kit: Flowbite v4
+- Component: Radio
+- Code:
+```twig
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Radio id="default" value="" name="radio-default"/>
+        <twig:Label for="default" class="select-none ms-2 font-medium">Default radio</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Radio id="checked" value="" name="radio-default" checked/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none" id="default" value="" name="radio-default">
+
+        <label class="block text-sm font-medium text-heading select-none ms-2" for="default">Default radio</label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none" id="checked" value="" name="radio-default" checked>
+
+        <label class="block text-sm font-medium text-heading select-none ms-2" for="checked">Checked state</label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Disabled.html__1.html
new file mode 100644
index 00000000000..b3108da0542
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Disabled.html__1.html	
@@ -0,0 +1,31 @@
+<!--
+- Kit: Flowbite v4
+- Component: Radio
+- Code:
+```twig
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <twig:Radio id="default" value="" name="radio-disabled" disabled/>
+        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default radio</twig:Label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <twig:Radio id="checked" value="" name="radio-disabled" checked disabled/>
+        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-3">
+    <div class="flex items-center mb-4">
+        <input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none" id="default" value="" name="radio-disabled" disabled>
+
+        <label class="block text-sm font-medium select-none ms-2 text-fg-disabled" for="default">Default radio</label>
+    </div>
+
+    <div class="flex items-center mb-4">
+        <input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none" id="checked" value="" name="radio-disabled" checked disabled>
+
+        <label class="block text-sm font-medium select-none ms-2 text-fg-disabled" for="checked">Checked state</label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Usage.html__1.html
new file mode 100644
index 00000000000..ab6e0de676e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Radio
+- Code:
+```twig
+<twig:Radio />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<input type="radio" class="w-4 h-4 text-neutral-primary bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Demo.html__1.html
new file mode 100644
index 00000000000..654cc67d3d0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Demo.html__1.html	
@@ -0,0 +1,26 @@
+<!--
+- Kit: Flowbite v4
+- Component: Select
+- Code:
+```twig
+<form class="w-full max-w-sm">
+    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
+    <twig:Select id="countries">
+        <option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </twig:Select>
+</form>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<form class="w-full max-w-sm">
+    <label class="block text-sm font-medium text-heading mb-2.5" for="countries">Select an option</label>
+    <select class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body disabled:text-fg-disabled" id="countries"><option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </select>
+</form>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Disabled.html__1.html
new file mode 100644
index 00000000000..4d979ba7992
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Disabled.html__1.html	
@@ -0,0 +1,26 @@
+<!--
+- Kit: Flowbite v4
+- Component: Select
+- Code:
+```twig
+<form class="w-full max-w-sm">
+    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
+    <twig:Select id="countries" disabled>
+        <option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </twig:Select>
+</form>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<form class="w-full max-w-sm">
+    <label class="block text-sm font-medium text-heading mb-2.5" for="countries">Select an option</label>
+    <select class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body disabled:text-fg-disabled" id="countries" disabled><option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </select>
+</form>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Multiple.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Multiple.html__1.html
new file mode 100644
index 00000000000..83d24cc9430
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Multiple.html__1.html	
@@ -0,0 +1,26 @@
+<!--
+- Kit: Flowbite v4
+- Component: Select
+- Code:
+```twig
+<form class="w-full max-w-sm">
+    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
+    <twig:Select id="countries" multiple>
+        <option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </twig:Select>
+</form>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<form class="w-full max-w-sm">
+    <label class="block text-sm font-medium text-heading mb-2.5" for="countries">Select an option</label>
+    <select class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body disabled:text-fg-disabled" id="countries" multiple><option selected>Choose a country</option>
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+        <option value="FR">France</option>
+        <option value="DE">Germany</option>
+    </select>
+</form>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Usage.html__1.html
new file mode 100644
index 00000000000..560fd3e642c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Usage.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Select
+- Code:
+```twig
+<twig:Select>
+    <option value="1">1</option>
+    <option value="2">2</option>
+    <option value="3">3</option>
+</twig:Select>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<select class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body disabled:text-fg-disabled"><option value="1">1</option>
+    <option value="2">2</option>
+    <option value="3">3</option>
+</select>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Card.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Card.html__1.html
new file mode 100644
index 00000000000..c517e244bbb
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Card.html__1.html	
@@ -0,0 +1,67 @@
+<!--
+- Kit: Flowbite v4
+- Component: Skeleton
+- Code:
+```twig
+<twig:Card class="animate-pulse" role="status">
+    <twig:Card:Header>
+        <twig:Skeleton class="flex items-center justify-center h-48 max-w-sm" shape="rounded" role="status">
+            <twig:ux:icon name="flowbite:image-outline" class="w-11 h-11 text-fg-disabled" aria-hidden="true" />
+            <span class="sr-only">Loading...</span>
+        </twig:Skeleton>
+    </twig:Card:Header>
+
+    <twig:Card:Content>
+        <twig:Skeleton class="h-2.5 w-48 mb-4" />
+
+        <div class="space-y-2.5">
+            <twig:Skeleton class="h-2" />
+            <twig:Skeleton class="h-2" />
+            <twig:Skeleton class="h-2" />
+        </div>
+
+        <div class="flex items-center mt-4">
+            <twig:ux:icon name="flowbite:user-circle-outline" class="w-8 h-8 text-fg-disabled me-3" aria-hidden="true" />
+            <div>
+                <twig:Skeleton class="h-2.5 w-32 mb-2" />
+                <twig:Skeleton class="w-48 h-2" />
+            </div>
+        </div>
+        <span class="sr-only">Loading...</span>
+    </twig:Card:Content>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs animate-pulse" role="status">
+<div class="pb-6">
+<div class="animate-pulse bg-neutral-quaternary rounded-base flex items-center justify-center h-48 max-w-sm" role="status">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-11 h-11 text-fg-disabled" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 16l5-7l6 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 1"></path></svg>
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div>
+<div class="animate-pulse bg-neutral-quaternary rounded-full h-2.5 w-48 mb-4"></div>
+
+
+        <div class="space-y-2.5">
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2"></div>
+
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2"></div>
+
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2"></div>
+
+        </div>
+
+        <div class="flex items-center mt-4">
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-fg-disabled me-3" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m0 0a8.95 8.95 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.95 8.95 0 0 0 12 21m3-11a3 3 0 1 1-6 0a3 3 0 0 1 6 0"></path></svg>
+            <div>
+                <div class="animate-pulse bg-neutral-quaternary rounded-full h-2.5 w-32 mb-2"></div>
+
+                <div class="animate-pulse bg-neutral-quaternary rounded-full w-48 h-2"></div>
+
+            </div>
+        </div>
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Demo.html__1.html
new file mode 100644
index 00000000000..3b644821cb2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Demo.html__1.html	
@@ -0,0 +1,39 @@
+<!--
+- Kit: Flowbite v4
+- Component: Skeleton
+- Code:
+```twig
+<div class="w-full max-w-sm mx-auto">
+    <div role="status">
+        <twig:Skeleton class="h-2.5 w-48 mb-4" />
+        <div class="space-y-2.5">
+            <twig:Skeleton class="h-2 max-w-[360px]" />
+            <twig:Skeleton class="h-2 w-[200px]" />
+            <twig:Skeleton class="h-2 max-w-[330px]" />
+            <twig:Skeleton class="h-2 max-w-[300px]" />
+            <twig:Skeleton class="h-2 max-w-[360px]" />
+        </div>
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-sm mx-auto">
+    <div role="status">
+        <div class="animate-pulse bg-neutral-quaternary rounded-full h-2.5 w-48 mb-4"></div>
+
+        <div class="space-y-2.5">
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2 max-w-[360px]"></div>
+
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2 w-[200px]"></div>
+
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2 max-w-[330px]"></div>
+
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2 max-w-[300px]"></div>
+
+            <div class="animate-pulse bg-neutral-quaternary rounded-full h-2 max-w-[360px]"></div>
+
+        </div>
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Usage.html__1.html
new file mode 100644
index 00000000000..00c72a0def8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Skeleton
+- Code:
+```twig
+<twig:Skeleton class="h-[20px] w-[100px]" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="animate-pulse bg-neutral-quaternary rounded-full h-[20px] w-[100px]"></div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Alignment.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Alignment.html__1.html
new file mode 100644
index 00000000000..551ed7d3468
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Alignment.html__1.html	
@@ -0,0 +1,63 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<div class="w-full">
+    <div class="text-left rtl:text-right">
+        <div role="status">
+            <twig:Spinner class="size-8 inline" />
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div class="text-center">
+        <div role="status">
+            <twig:Spinner class="size-8 inline" />
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div class="text-right rtl:text-left">
+        <div role="status">
+            <twig:Spinner class="size-8 inline" />
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full">
+    <div class="text-left rtl:text-right">
+        <div role="status">
+            <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-8 inline" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div class="text-center">
+        <div role="status">
+            <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-8 inline" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+
+    <div class="text-right rtl:text-left">
+        <div role="status">
+            <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-8 inline" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Color.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Color.html__1.html
new file mode 100644
index 00000000000..6de5c06d107
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Color.html__1.html	
@@ -0,0 +1,35 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<div class="flex items-center gap-6">
+    <twig:Spinner class="text-brand size-8" />
+    <twig:Spinner class="text-danger size-8" />
+    <twig:Spinner class="text-success size-8" />
+    <twig:Spinner class="text-warning size-8" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center gap-6">
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary text-brand size-8" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary text-danger size-8" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary text-success size-8" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary text-warning size-8" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Demo.html__1.html
new file mode 100644
index 00000000000..959da889ff6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Demo.html__1.html	
@@ -0,0 +1,12 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<twig:Spinner class="size-10" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-10" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Progress.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Progress.html__1.html
new file mode 100644
index 00000000000..d2db0b256f3
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Progress.html__1.html	
@@ -0,0 +1,51 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<div>
+    <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">
+        <li class="flex items-center">
+            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
+            Upload your file to our website
+        </li>
+        <li class="flex items-center">
+            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
+            Choose your file format
+        </li>
+        <li class="flex items-center">
+            <div role="status">
+                <twig:Spinner class="size-4 text-brand me-2"/>
+                <span class="sr-only">Loading...</span>
+            </div>
+            Preparing your file
+        </li>
+    </ul>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div>
+    <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">
+        <li class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5 text-fg-success shrink-0 me-2" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5L11 14l4-4m6 2a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+            Upload your file to our website
+        </li>
+        <li class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5 text-fg-success shrink-0 me-2" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5L11 14l4-4m6 2a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
+            Choose your file format
+        </li>
+        <li class="flex items-center">
+            <div role="status">
+                <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-4 text-brand me-2" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+                <span class="sr-only">Loading...</span>
+            </div>
+            Preparing your file
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Size.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Size.html__1.html
new file mode 100644
index 00000000000..240b5548637
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Size.html__1.html	
@@ -0,0 +1,29 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<div class="flex items-center gap-6">
+    <twig:Spinner />
+    <twig:Spinner class="size-6" />
+    <twig:Spinner class="size-8" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center gap-6">
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-4" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-6" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+    <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-8" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Usage.html__1.html
new file mode 100644
index 00000000000..18b8520b83d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Usage.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<twig:Button disabled>
+    <twig:Spinner /> Please wait
+</twig:Button>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button class="inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium text-sm px-4 py-2.5 rounded-base" disabled><svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-4" 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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+ Please wait
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Button.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Button.html__1.html
new file mode 100644
index 00000000000..11158d708ab
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Button.html__1.html	
@@ -0,0 +1,22 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<div>
+    <twig:Button variant="tertiary">
+        <twig:Spinner class="me-2 text-brand" />
+        Loading...
+    </twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div>
+    <button class="inline-flex items-center justify-center box-border border font-medium focus:ring-4 focus:outline-none shadow-xs text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft text-sm px-4 py-2.5 rounded-base"><svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-4 me-2 text-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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+        Loading...
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Card.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Card.html__1.html
new file mode 100644
index 00000000000..39ad52839c1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Card.html__1.html	
@@ -0,0 +1,39 @@
+<!--
+- Kit: Flowbite v4
+- Component: Spinner
+- Code:
+```twig
+<twig:Card class="max-w-sm relative">
+    <twig:Card:Header class="opacity-20">
+        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
+    </twig:Card:Header>
+
+    <twig:Card:Content class="opacity-20">
+        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </twig:Card:Content>
+
+    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+        <twig:Spinner class="size-8 text-brand"/>
+        <span class="sr-only">Loading...</span>
+    </div>
+</twig:Card>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="bg-neutral-primary-soft text-body block p-6 border border-default rounded-base shadow-xs max-w-sm relative">
+<div class="pb-6 opacity-20">
+<h5 class="text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
+    </div>
+
+    <div class="opacity-20">
+<p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
+    </div>
+
+    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+        <svg role="status" aria-hidden="true" class="animate-spin fill-neutral-tertiary size-8 text-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="currentFill"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
+</svg>
+
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Demo.html__1.html
new file mode 100644
index 00000000000..3561d008401
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Demo.html__1.html	
@@ -0,0 +1,92 @@
+<!--
+- Kit: Flowbite v4
+- Component: Table
+- Code:
+```twig
+{%- set products = [
+    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
+    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
+    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
+] -%}
+<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+    <twig:Table>
+        <twig:Table:Caption>
+            Our products
+            <p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
+        </twig:Table:Caption>
+        <twig:Table:Header class="border-t">
+            <twig:Table:Row>
+                <twig:Table:Head>Product name</twig:Table:Head>
+                <twig:Table:Head>Color</twig:Table:Head>
+                <twig:Table:Head>Category</twig:Table:Head>
+                <twig:Table:Head>Price</twig:Table:Head>
+                <twig:Table:Head>Stock</twig:Table:Head>
+            </twig:Table:Row>
+        </twig:Table:Header>
+        <twig:Table:Body>
+            {% for product in products %}
+                <twig:Table:Row>
+                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
+                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
+                </twig:Table:Row>
+            {% endfor %}
+        </twig:Table:Body>
+        <twig:Table:Footer>
+            <twig:Table:Row>
+                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
+                <twig:Table:Cell>$5997</twig:Table:Cell>
+                <twig:Table:Cell>775</twig:Table:Cell>
+            </twig:Table:Row>
+        </twig:Table:Footer>
+    </twig:Table>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+    <table data-border="bordered" class="w-full text-sm text-left rtl:text-right text-body group/table">
+<caption class="p-5 text-lg font-medium text-left rtl:text-right text-heading">Our products
+            <p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
+        </caption>
+        <thead class="text-sm text-body rounded-base group-data-[border=bordered]/table:bg-neutral-secondary-soft group-data-[border=bordered]/table:border-b group-data-[border=bordered]/table:border-default border-t">
+<tr>
+<th class="px-6 py-3 font-medium">Product name</th>
+                <th class="px-6 py-3 font-medium">Color</th>
+                <th class="px-6 py-3 font-medium">Category</th>
+                <th class="px-6 py-3 font-medium">Price</th>
+                <th class="px-6 py-3 font-medium">Stock</th>
+            </tr>
+        </thead>
+        <tbody class="[&amp;&gt;tr]:bg-neutral-primary-soft group-data-[border=bordered]/table:[&amp;&gt;tr]:border-b group-data-[border=bordered]/table:[&amp;&gt;tr]:border-default [&amp;&gt;tr]:transition-colors [&amp;&gt;tr]:hover:bg-neutral-secondary-medium">                <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Apple MacBook Pro 17"</th>
+                    <td class="px-6 py-4">Silver</td>
+                    <td class="px-6 py-4">Laptop</td>
+                    <td class="px-6 py-4">$2999</td>
+                    <td class="px-6 py-4">231</td>
+                </tr>
+                            <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Microsoft Surface Pro</th>
+                    <td class="px-6 py-4">White</td>
+                    <td class="px-6 py-4">Laptop PC</td>
+                    <td class="px-6 py-4">$1999</td>
+                    <td class="px-6 py-4">423</td>
+                </tr>
+                            <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Magic Mouse 2</th>
+                    <td class="px-6 py-4">Black</td>
+                    <td class="px-6 py-4">Accessories</td>
+                    <td class="px-6 py-4">$99</td>
+                    <td class="px-6 py-4">121</td>
+                </tr>
+                    </tbody>
+        <tfoot class="font-semibold text-heading">
+<tr>
+<th class="px-6 py-3 font-medium text-base" scope="row" colspan="3">Total</th>
+                <td class="px-6 py-4">$5997</td>
+                <td class="px-6 py-4">775</td>
+            </tr>
+        </tfoot>
+    </table>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Highlight striped.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Highlight striped.html__1.html
new file mode 100644
index 00000000000..7fcdc83f54f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Highlight striped.html__1.html	
@@ -0,0 +1,85 @@
+<!--
+- Kit: Flowbite v4
+- Component: Table
+- Code:
+```twig
+{%- set products = [
+    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
+    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
+    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
+] -%}
+<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+    <twig:Table>
+        <twig:Table:Header>
+            <twig:Table:Row>
+                <twig:Table:Head>Product name</twig:Table:Head>
+                <twig:Table:Head>Color</twig:Table:Head>
+                <twig:Table:Head>Category</twig:Table:Head>
+                <twig:Table:Head>Price</twig:Table:Head>
+                <twig:Table:Head>Stock</twig:Table:Head>
+            </twig:Table:Row>
+        </twig:Table:Header>
+        <twig:Table:Body highlight="striped">
+            {% for product in products %}
+                <twig:Table:Row>
+                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
+                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
+                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
+                </twig:Table:Row>
+            {% endfor %}
+        </twig:Table:Body>
+        <twig:Table:Footer>
+            <twig:Table:Row>
+                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
+                <twig:Table:Cell>$5997</twig:Table:Cell>
+                <twig:Table:Cell>775</twig:Table:Cell>
+            </twig:Table:Row>
+        </twig:Table:Footer>
+    </twig:Table>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+    <table data-border="bordered" class="w-full text-sm text-left rtl:text-right text-body group/table">
+<thead class="text-sm text-body rounded-base group-data-[border=bordered]/table:bg-neutral-secondary-soft group-data-[border=bordered]/table:border-b group-data-[border=bordered]/table:border-default">
+<tr>
+<th class="px-6 py-3 font-medium">Product name</th>
+                <th class="px-6 py-3 font-medium">Color</th>
+                <th class="px-6 py-3 font-medium">Category</th>
+                <th class="px-6 py-3 font-medium">Price</th>
+                <th class="px-6 py-3 font-medium">Stock</th>
+            </tr>
+        </thead>
+        <tbody class="[&amp;&gt;tr]:bg-neutral-primary-soft group-data-[border=bordered]/table:[&amp;&gt;tr]:border-b group-data-[border=bordered]/table:[&amp;&gt;tr]:border-default [&amp;&gt;tr]:transition-colors [&amp;&gt;tr]:odd:bg-neutral-primary [&amp;&gt;tr]:even:bg-neutral-secondary-soft">                <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Apple MacBook Pro 17"</th>
+                    <td class="px-6 py-4">Silver</td>
+                    <td class="px-6 py-4">Laptop</td>
+                    <td class="px-6 py-4">$2999</td>
+                    <td class="px-6 py-4">231</td>
+                </tr>
+                            <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Microsoft Surface Pro</th>
+                    <td class="px-6 py-4">White</td>
+                    <td class="px-6 py-4">Laptop PC</td>
+                    <td class="px-6 py-4">$1999</td>
+                    <td class="px-6 py-4">423</td>
+                </tr>
+                            <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Magic Mouse 2</th>
+                    <td class="px-6 py-4">Black</td>
+                    <td class="px-6 py-4">Accessories</td>
+                    <td class="px-6 py-4">$99</td>
+                    <td class="px-6 py-4">121</td>
+                </tr>
+                    </tbody>
+        <tfoot class="font-semibold text-heading">
+<tr>
+<th class="px-6 py-3 font-medium text-base" scope="row" colspan="3">Total</th>
+                <td class="px-6 py-4">$5997</td>
+                <td class="px-6 py-4">775</td>
+            </tr>
+        </tfoot>
+    </table>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Usage.html__1.html
new file mode 100644
index 00000000000..64d98714567
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Usage.html__1.html	
@@ -0,0 +1,45 @@
+<!--
+- Kit: Flowbite v4
+- Component: Table
+- Code:
+```twig
+<twig:Table>
+    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
+    <twig:Table:Header>
+        <twig:Table:Row>
+            <twig:Table:Head>Invoice</twig:Table:Head>
+            <twig:Table:Head>Status</twig:Table:Head>
+            <twig:Table:Head>Method</twig:Table:Head>
+            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
+        </twig:Table:Row>
+    </twig:Table:Header>
+    <twig:Table:Body>
+        <twig:Table:Row>
+            <twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
+            <twig:Table:Cell>Paid</twig:Table:Cell>
+            <twig:Table:Cell>Credit Card</twig:Table:Cell>
+            <twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
+        </twig:Table:Row>
+    </twig:Table:Body>
+</twig:Table>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<table data-border="bordered" class="w-full text-sm text-left rtl:text-right text-body group/table">
+<caption class="p-5 text-lg font-medium text-left rtl:text-right text-heading">A list of your recent invoices.</caption>
+    <thead class="text-sm text-body rounded-base group-data-[border=bordered]/table:bg-neutral-secondary-soft group-data-[border=bordered]/table:border-b group-data-[border=bordered]/table:border-default">
+<tr>
+<th class="px-6 py-3 font-medium">Invoice</th>
+            <th class="px-6 py-3 font-medium">Status</th>
+            <th class="px-6 py-3 font-medium">Method</th>
+            <th class="px-6 py-3 font-medium text-right">Amount</th>
+        </tr>
+    </thead>
+    <tbody class="[&amp;&gt;tr]:bg-neutral-primary-soft group-data-[border=bordered]/table:[&amp;&gt;tr]:border-b group-data-[border=bordered]/table:[&amp;&gt;tr]:border-default [&amp;&gt;tr]:transition-colors [&amp;&gt;tr]:hover:bg-neutral-secondary-medium">
+<tr>
+<td class="px-6 py-4 font-medium">INV001</td>
+            <td class="px-6 py-4">Paid</td>
+            <td class="px-6 py-4">Credit Card</td>
+            <td class="px-6 py-4 text-right">$250.00</td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Without border.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Without border.html__1.html
new file mode 100644
index 00000000000..4b55bb64afe
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Without border.html__1.html	
@@ -0,0 +1,81 @@
+<!--
+- Kit: Flowbite v4
+- Component: Table
+- Code:
+```twig
+{%- set products = [
+    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
+    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
+    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
+] -%}
+<twig:Table borderless>
+    <twig:Table:Header>
+        <twig:Table:Row>
+            <twig:Table:Head>Product name</twig:Table:Head>
+            <twig:Table:Head>Color</twig:Table:Head>
+            <twig:Table:Head>Category</twig:Table:Head>
+            <twig:Table:Head>Price</twig:Table:Head>
+            <twig:Table:Head>Stock</twig:Table:Head>
+        </twig:Table:Row>
+    </twig:Table:Header>
+    <twig:Table:Body>
+        {% for product in products %}
+            <twig:Table:Row>
+                <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
+                <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
+            </twig:Table:Row>
+        {% endfor %}
+    </twig:Table:Body>
+    <twig:Table:Footer>
+        <twig:Table:Row>
+            <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
+            <twig:Table:Cell>$5997</twig:Table:Cell>
+            <twig:Table:Cell>775</twig:Table:Cell>
+        </twig:Table:Row>
+    </twig:Table:Footer>
+</twig:Table>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<table data-border="borderless" class="w-full text-sm text-left rtl:text-right text-body group/table">
+<thead class="text-sm text-body rounded-base group-data-[border=bordered]/table:bg-neutral-secondary-soft group-data-[border=bordered]/table:border-b group-data-[border=bordered]/table:border-default">
+<tr>
+<th class="px-6 py-3 font-medium">Product name</th>
+            <th class="px-6 py-3 font-medium">Color</th>
+            <th class="px-6 py-3 font-medium">Category</th>
+            <th class="px-6 py-3 font-medium">Price</th>
+            <th class="px-6 py-3 font-medium">Stock</th>
+        </tr>
+    </thead>
+    <tbody class="[&amp;&gt;tr]:bg-neutral-primary-soft group-data-[border=bordered]/table:[&amp;&gt;tr]:border-b group-data-[border=bordered]/table:[&amp;&gt;tr]:border-default [&amp;&gt;tr]:transition-colors [&amp;&gt;tr]:hover:bg-neutral-secondary-medium">            <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Apple MacBook Pro 17"</th>
+                <td class="px-6 py-4">Silver</td>
+                <td class="px-6 py-4">Laptop</td>
+                <td class="px-6 py-4">$2999</td>
+                <td class="px-6 py-4">231</td>
+            </tr>
+                    <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Microsoft Surface Pro</th>
+                <td class="px-6 py-4">White</td>
+                <td class="px-6 py-4">Laptop PC</td>
+                <td class="px-6 py-4">$1999</td>
+                <td class="px-6 py-4">423</td>
+            </tr>
+                    <tr>
+<th class="px-6 py-3 font-medium text-heading whitespace-nowrap" scope="row">Magic Mouse 2</th>
+                <td class="px-6 py-4">Black</td>
+                <td class="px-6 py-4">Accessories</td>
+                <td class="px-6 py-4">$99</td>
+                <td class="px-6 py-4">121</td>
+            </tr>
+            </tbody>
+    <tfoot class="font-semibold text-heading">
+<tr>
+<th class="px-6 py-3 font-medium text-base" scope="row" colspan="3">Total</th>
+            <td class="px-6 py-4">$5997</td>
+            <td class="px-6 py-4">775</td>
+        </tr>
+    </tfoot>
+</table>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Demo.html__1.html
new file mode 100644
index 00000000000..e8d82fe3e7a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Demo.html__1.html	
@@ -0,0 +1,75 @@
+<!--
+- Kit: Flowbite v4
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="profile" class="max-w-xl w-full">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contact">Contact</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="profile">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="dashboard">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="settings">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="contact">
+        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Contact tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="tabs" data-tabs-active-tab-value="profile" data-orientation="horizontal" class="gap-4 group/tabs flex data-[orientation=horizontal]:flex-col max-w-xl w-full">
+    <ul role="tablist" data-variant="default" class="group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col border-b border-default">
+    <li class="me-2" role="presentation">
+    <button id="tab-profile" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="profile" role="tab" aria-controls="tab-profile-description" aria-selected="true" data-state="active" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Profile</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-dashboard" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="dashboard" role="tab" aria-controls="tab-dashboard-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Dashboard</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-settings" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Settings</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-contact" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="contact" role="tab" aria-controls="tab-contact-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Contact</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-disabled" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="disabled" role="tab" aria-controls="tab-disabled-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0" disabled>Disabled</button>
+</li>
+    </ul>
+    <div id="tab-profile-description" data-tabs-target="tab" data-tab-id="profile" role="tabpanel" aria-labelledby="tab-profile" data-state="active" class="data-[state=inactive]:hidden">
+<div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </div>
+    <div id="tab-dashboard-description" data-tabs-target="tab" data-tab-id="dashboard" role="tabpanel" aria-labelledby="tab-dashboard" data-state="inactive" class="data-[state=inactive]:hidden">
+<div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </div>
+    <div id="tab-settings-description" data-tabs-target="tab" data-tab-id="settings" role="tabpanel" aria-labelledby="tab-settings" data-state="inactive" class="data-[state=inactive]:hidden">
+<div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </div>
+    <div id="tab-contact-description" data-tabs-target="tab" data-tab-id="contact" role="tabpanel" aria-labelledby="tab-contact" data-state="inactive" class="data-[state=inactive]:hidden">
+<div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
+            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Contact tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Usage.html__1.html
new file mode 100644
index 00000000000..79edd3e965e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Usage.html__1.html	
@@ -0,0 +1,27 @@
+<!--
+- Kit: Flowbite v4
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="account" class="w-[400px]">
+    <twig:Tabs:List>
+        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="account">Make changes to your account here.</twig:Tabs:Content>
+    <twig:Tabs:Content value="password">Change your password here.</twig:Tabs:Content>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="tabs" data-tabs-active-tab-value="account" data-orientation="horizontal" class="gap-4 group/tabs flex data-[orientation=horizontal]:flex-col w-[400px]">
+    <ul role="tablist" data-variant="default" class="group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col border-b border-default">
+    <li class="me-2" role="presentation">
+    <button id="tab-account" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="account" role="tab" aria-controls="tab-account-description" aria-selected="true" data-state="active" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Account</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-password" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="password" role="tab" aria-controls="tab-password-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Password</button>
+</li>
+    </ul>
+    <div id="tab-account-description" data-tabs-target="tab" data-tab-id="account" role="tabpanel" aria-labelledby="tab-account" data-state="active" class="data-[state=inactive]:hidden">Make changes to your account here.</div>
+    <div id="tab-password-description" data-tabs-target="tab" data-tab-id="password" role="tabpanel" aria-labelledby="tab-password" data-state="inactive" class="data-[state=inactive]:hidden">Change your password here.</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Variant Line.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Variant Line.html__1.html
new file mode 100644
index 00000000000..9d439df81aa
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Variant Line.html__1.html	
@@ -0,0 +1,35 @@
+<!--
+- Kit: Flowbite v4
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
+    <twig:Tabs:List variant="line">
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contacts">Contacts</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="tabs" data-tabs-active-tab-value="dashboard" data-orientation="horizontal" class="gap-4 group/tabs flex data-[orientation=horizontal]:flex-col max-w-[800px] w-full">
+    <ul role="tablist" data-variant="line" class="group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col border-b border-default">
+    <li class="me-2" role="presentation">
+    <button id="tab-profile" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="profile" role="tab" aria-controls="tab-profile-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Profile</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-dashboard" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="dashboard" role="tab" aria-controls="tab-dashboard-description" aria-selected="true" data-state="active" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Dashboard</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-settings" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Settings</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-contacts" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="contacts" role="tab" aria-controls="tab-contacts-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Contacts</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-disabled" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="disabled" role="tab" aria-controls="tab-disabled-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0" disabled>Disabled</button>
+</li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Variant Pill.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Variant Pill.html__1.html
new file mode 100644
index 00000000000..9529ff9724b
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Variant Pill.html__1.html	
@@ -0,0 +1,35 @@
+<!--
+- Kit: Flowbite v4
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
+    <twig:Tabs:List variant="pill">
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contacts">Contacts</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="tabs" data-tabs-active-tab-value="dashboard" data-orientation="horizontal" class="gap-4 group/tabs flex data-[orientation=horizontal]:flex-col max-w-[800px] w-full">
+    <ul role="tablist" data-variant="pill" class="group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col">
+    <li class="me-2" role="presentation">
+    <button id="tab-profile" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="profile" role="tab" aria-controls="tab-profile-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Profile</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-dashboard" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="dashboard" role="tab" aria-controls="tab-dashboard-description" aria-selected="true" data-state="active" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Dashboard</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-settings" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Settings</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-contacts" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="contacts" role="tab" aria-controls="tab-contacts-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Contacts</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-disabled" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="disabled" role="tab" aria-controls="tab-disabled-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0" disabled>Disabled</button>
+</li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Vertical.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Vertical.html__1.html
new file mode 100644
index 00000000000..f4770aeaac6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file Vertical.html__1.html	
@@ -0,0 +1,79 @@
+<!--
+- Kit: Flowbite v4
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="profile" orientation="vertical" class="max-w-xl w-full">
+    <twig:Tabs:List variant="pill">
+        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contact">Contact</twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
+    </twig:Tabs:List>
+    <twig:Tabs:Content value="profile">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Profile Tab</h3>
+            <p class="mb-2">This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.</p>
+            <p>The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="dashboard">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Dashboard Tab</h3>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="settings">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Settings Tab</h3>
+        </div>
+    </twig:Tabs:Content>
+    <twig:Tabs:Content value="contact">
+        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Contact Tab</h3>
+        </div>
+    </twig:Tabs:Content>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="tabs" data-tabs-active-tab-value="profile" data-orientation="vertical" class="gap-4 group/tabs flex data-[orientation=horizontal]:flex-col max-w-xl w-full">
+    <ul role="tablist" data-variant="pill" class="group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col">
+    <li class="me-2" role="presentation">
+    <button id="tab-profile" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="profile" role="tab" aria-controls="tab-profile-description" aria-selected="true" data-state="active" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Profile</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-dashboard" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="dashboard" role="tab" aria-controls="tab-dashboard-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Dashboard</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-settings" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Settings</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-contact" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="contact" role="tab" aria-controls="tab-contact-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0">Contact</button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-disabled" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="disabled" role="tab" aria-controls="tab-disabled-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0" disabled>Disabled</button>
+</li>
+    </ul>
+    <div id="tab-profile-description" data-tabs-target="tab" data-tab-id="profile" role="tabpanel" aria-labelledby="tab-profile" data-state="active" class="data-[state=inactive]:hidden">
+<div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Profile Tab</h3>
+            <p class="mb-2">This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.</p>
+            <p>The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </div>
+    <div id="tab-dashboard-description" data-tabs-target="tab" data-tab-id="dashboard" role="tabpanel" aria-labelledby="tab-dashboard" data-state="inactive" class="data-[state=inactive]:hidden">
+<div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Dashboard Tab</h3>
+        </div>
+    </div>
+    <div id="tab-settings-description" data-tabs-target="tab" data-tab-id="settings" role="tabpanel" aria-labelledby="tab-settings" data-state="inactive" class="data-[state=inactive]:hidden">
+<div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Settings Tab</h3>
+        </div>
+    </div>
+    <div id="tab-contact-description" data-tabs-target="tab" data-tab-id="contact" role="tabpanel" aria-labelledby="tab-contact" data-state="inactive" class="data-[state=inactive]:hidden">
+<div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
+            <h3 class="text-lg font-semibold text-heading mb-4">Contact Tab</h3>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file With Icon.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file With Icon.html__1.html
new file mode 100644
index 00000000000..c4fb4efc004
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component tabs, code file With Icon.html__1.html	
@@ -0,0 +1,58 @@
+<!--
+- Kit: Flowbite v4
+- Component: Tabs
+- Code:
+```twig
+<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
+    <twig:Tabs:List variant="line">
+        <twig:Tabs:Trigger value="profile">
+            <twig:ux:icon name="flowbite:user-circle-outline" class="size-4 me-2" aria-hidden="true"/>
+            Profile
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="dashboard">
+            <twig:ux:icon name="flowbite:grid-outline" class="size-4 me-2" aria-hidden="true"/>
+            Dashboard
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="settings">
+            <twig:ux:icon name="flowbite:adjustments-vertical-outline" class="size-4 me-2" aria-hidden="true"/>
+            Settings
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="contacts">
+            <twig:ux:icon name="flowbite:user-headset-outline" class="size-4 me-2" aria-hidden="true"/>
+            Contacts
+        </twig:Tabs:Trigger>
+        <twig:Tabs:Trigger value="disabled" disabled>
+            Disabled
+        </twig:Tabs:Trigger>
+    </twig:Tabs:List>
+</twig:Tabs>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="tabs" data-tabs-active-tab-value="dashboard" data-orientation="horizontal" class="gap-4 group/tabs flex data-[orientation=horizontal]:flex-col max-w-[800px] w-full">
+    <ul role="tablist" data-variant="line" class="group/tabs-list flex flex-wrap -mb-px group-data-[orientation=vertical]/tabs:space-y-4 group-data-[orientation=vertical]/tabs:flex-col border-b border-default">
+    <li class="me-2" role="presentation">
+    <button id="tab-profile" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="profile" role="tab" aria-controls="tab-profile-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4 me-2" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m0 0a8.95 8.95 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.95 8.95 0 0 0 12 21m3-11a3 3 0 1 1-6 0a3 3 0 0 1 6 0"></path></svg>
+            Profile
+        </button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-dashboard" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="dashboard" role="tab" aria-controls="tab-dashboard-description" aria-selected="true" data-state="active" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4 me-2" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.143 4H4.857A.857.857 0 0 0 4 4.857v4.286c0 .473.384.857.857.857h4.286A.857.857 0 0 0 10 9.143V4.857A.857.857 0 0 0 9.143 4m10 0h-4.286a.857.857 0 0 0-.857.857v4.286c0 .473.384.857.857.857h4.286A.857.857 0 0 0 20 9.143V4.857A.857.857 0 0 0 19.143 4m-10 10H4.857a.857.857 0 0 0-.857.857v4.286c0 .473.384.857.857.857h4.286a.857.857 0 0 0 .857-.857v-4.286A.857.857 0 0 0 9.143 14m10 0h-4.286a.857.857 0 0 0-.857.857v4.286c0 .473.384.857.857.857h4.286a.857.857 0 0 0 .857-.857v-4.286a.857.857 0 0 0-.857-.857"></path></svg>
+            Dashboard
+        </button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-settings" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4 me-2" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 4v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2m6-16v2m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v10m6-16v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2"></path></svg>
+            Settings
+        </button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-contacts" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="contacts" role="tab" aria-controls="tab-contacts-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4 me-2" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.079 6.839a3 3 0 0 0-4.255.1M13 20h1.083A3.916 3.916 0 0 0 18 16.083V9A6 6 0 1 0 6 9v7m7 4v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1m-7-4v-6H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2zm12-6h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1z"></path></svg>
+            Contacts
+        </button>
+</li>
+        <li class="me-2" role="presentation">
+    <button id="tab-disabled" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="disabled" role="tab" aria-controls="tab-disabled-description" aria-selected="false" data-state="inactive" class="inline-flex items-center p-4 disabled:text-fg-disabled disabled:cursor-not-allowed group-data-[variant=default]/tabs-list:hover:text-heading group-data-[variant=default]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=default]/tabs-list:rounded-t-base data-[state=active]:text-fg-brand group-data-[variant=default]/tabs-list:data-[state=active]:bg-neutral-secondary-soft group-data-[variant=line]/tabs-list:hover:text-fg-brand group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:hover:border-fg-brand group-data-[variant=line]/tabs-list:data-[state=active]:border-brand group-data-[variant=pill]/tabs-list:rounded-base group-data-[variant=pill]/tabs-list:py-2.5 group-data-[variant=pill]/tabs-list:hover:bg-neutral-secondary-soft group-data-[variant=pill]/tabs-list:hover:text-heading group-data-[variant=pill]/tabs-list:data-[state=active]:bg-brand group-data-[variant=pill]/tabs-list:data-[state=active]:text-white [&amp;_svg:not([class*='size-'])]:size-4 whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0" disabled>Disabled
+        </button>
+</li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Default.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Default.html__1.html
new file mode 100644
index 00000000000..ff09dd6a07b
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Default.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Textarea
+- Code:
+```twig
+<twig:Textarea placeholder="Type your message here." class="max-w-sm" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<textarea class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body max-w-sm" placeholder="Type your message here."></textarea>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Demo.html__1.html
new file mode 100644
index 00000000000..77568ca0abc
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Demo.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Textarea
+- Code:
+```twig
+<twig:Textarea placeholder="Type your message here." />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<textarea class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" placeholder="Type your message here."></textarea>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Disabled.html__1.html
new file mode 100644
index 00000000000..482238bef37
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Disabled.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Textarea
+- Code:
+```twig
+<twig:Textarea placeholder="Type your message here." disabled class="max-w-sm" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<textarea class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body max-w-sm" placeholder="Type your message here." disabled></textarea>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Usage.html__1.html
new file mode 100644
index 00000000000..53e8ed19aae
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Usage.html__1.html	
@@ -0,0 +1,9 @@
+<!--
+- Kit: Flowbite v4
+- Component: Textarea
+- Code:
+```twig
+<twig:Textarea />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<textarea class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body"></textarea>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file With Label.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file With Label.html__1.html
new file mode 100644
index 00000000000..e63d858012c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file With Label.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Textarea
+- Code:
+```twig
+<div class="grid w-sm gap-1.5">
+    <twig:Label for="message">Your message</twig:Label>
+    <twig:Textarea id="message" placeholder="Type your message here." />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-sm gap-1.5">
+    <label class="block text-sm font-medium text-heading" for="message">Your message</label>
+    <textarea class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" id="message" placeholder="Type your message here."></textarea>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Demo.html__1.html
new file mode 100644
index 00000000000..58ff6c4af03
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Demo.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle id="checked" value="" checked>
+    Toggle me
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="sr-only peer" id="checked" value="" checked>
+    <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-disabled:bg-neutral-tertiary peer-checked:bg-brand"></div>
+    <span class="select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled">Toggle me
+</span>
+</label>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Disabled.html__1.html
new file mode 100644
index 00000000000..914061b16c8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Disabled.html__1.html	
@@ -0,0 +1,31 @@
+<!--
+- Kit: Flowbite v4
+- Component: Toggle
+- Code:
+```twig
+<div class="flex flex-col gap-3">
+    <twig:Toggle id="checked" value="" disabled>
+        Toggle me
+    </twig:Toggle>
+
+    <twig:Toggle id="checked" value="" checked disabled>
+        Toggle me
+    </twig:Toggle>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-3">
+    <label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="sr-only peer" id="checked" value="" disabled>
+    <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-disabled:bg-neutral-tertiary peer-checked:bg-brand"></div>
+    <span class="select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled">Toggle me
+    </span>
+</label>
+
+    <label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="sr-only peer" id="checked" value="" checked disabled>
+    <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-disabled:bg-neutral-tertiary peer-checked:bg-brand"></div>
+    <span class="select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled">Toggle me
+    </span>
+</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Usage.html__1.html
new file mode 100644
index 00000000000..bd7aea0a3a2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Usage.html__1.html	
@@ -0,0 +1,16 @@
+<!--
+- Kit: Flowbite v4
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle>
+    Label
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="sr-only peer">
+    <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-disabled:bg-neutral-tertiary peer-checked:bg-brand"></div>
+    <span class="select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled">Label
+</span>
+</label>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Demo.html__1.html
index d6f44195a5f..2bd96fa61d5 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Demo.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Demo.html__1.html	
@@ -76,7 +76,7 @@
         <button id="tab-reports" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="reports" role="tab" aria-controls="tab-reports-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Reports</button>
         <button id="tab-settings" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="settings" role="tab" aria-controls="tab-settings-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Settings</button>
     </nav>
-    <div id="tab-overview-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="overview" role="tabpanel" aria-labelledby="tab-overview-title" data-state="active" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+    <div id="tab-overview-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="overview" role="tabpanel" aria-labelledby="tab-overview" data-state="active" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
 <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
 <div class="flex flex-col space-y-1.5 p-6">
 <div class="leading-none font-semibold">Overview</div>
@@ -88,7 +88,7 @@
             </div>
         </div>
     </div>
-    <div id="tab-analytics-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="analytics" role="tabpanel" aria-labelledby="tab-analytics-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+    <div id="tab-analytics-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="analytics" role="tabpanel" aria-labelledby="tab-analytics" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
 <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
 <div class="flex flex-col space-y-1.5 p-6">
 <div class="leading-none font-semibold">Analytics</div>
@@ -100,7 +100,7 @@
             </div>
         </div>
     </div>
-    <div id="tab-reports-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="reports" role="tabpanel" aria-labelledby="tab-reports-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+    <div id="tab-reports-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="reports" role="tabpanel" aria-labelledby="tab-reports" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
 <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
 <div class="flex flex-col space-y-1.5 p-6">
 <div class="leading-none font-semibold">Reports</div>
@@ -112,7 +112,7 @@
             </div>
         </div>
     </div>
-    <div id="tab-settings-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="settings" role="tabpanel" aria-labelledby="tab-settings-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
+    <div id="tab-settings-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="settings" role="tabpanel" aria-labelledby="tab-settings" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">
 <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
 <div class="flex flex-col space-y-1.5 p-6">
 <div class="leading-none font-semibold">Settings</div>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Usage.html__1.html
index a1872b1798a..2c93e0109c7 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Usage.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tabs, code file Usage.html__1.html	
@@ -18,6 +18,6 @@
     <button id="tab-account" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="account" role="tab" aria-controls="tab-account-description" aria-selected="true" data-state="active" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Account</button>
         <button id="tab-password" data-slot="tabs-trigger" data-action="click-&gt;tabs#open" data-tabs-target="trigger" data-tab-id="password" role="tab" aria-controls="tab-password-description" aria-selected="false" data-state="inactive" class="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&amp;_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100">Password</button>
     </nav>
-    <div id="tab-account-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="account" role="tabpanel" aria-labelledby="tab-account-title" data-state="active" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">Make changes to your account here.</div>
-    <div id="tab-password-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="password" role="tabpanel" aria-labelledby="tab-password-title" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">Change your password here.</div>
+    <div id="tab-account-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="account" role="tabpanel" aria-labelledby="tab-account" data-state="active" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">Make changes to your account here.</div>
+    <div id="tab-password-description" data-slot="tabs-content" data-tabs-target="tab" data-tab-id="password" role="tabpanel" aria-labelledby="tab-password" data-state="inactive" class="text-sm flex-1 outline-none data-[state=inactive]:hidden">Change your password here.</div>
 </div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html
deleted file mode 100644
index bc4be76fff2..00000000000
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html	
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--
-- Kit: Shadcn UI
-- Component: Toggle
-- Code:
-```twig
-<twig:Toggle aria-label="Toggle bold">
-    <twig:ux:icon name="lucide:bold" />
-</twig:Toggle>
-```
-- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle bold"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path></svg>
-</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html
deleted file mode 100644
index 1dd4da16bed..00000000000
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html	
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--
-- Kit: Shadcn UI
-- Component: Toggle
-- Code:
-```twig
-<twig:Toggle size="lg" aria-label="Toggle italic">
-    <twig:ux:icon name="lucide:italic" />
-</twig:Toggle>
-```
-- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-10 min-w-10 px-2.5" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle italic"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4h-9m4 16H5M15 4L9 20"></path></svg>
-</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html
deleted file mode 100644
index d869e27c65b..00000000000
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html	
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--
-- Kit: Shadcn UI
-- Component: Toggle
-- Code:
-```twig
-<twig:Toggle size="sm" aria-label="Toggle italic">
-    <twig:ux:icon name="lucide:italic" />
-</twig:Toggle>
-```
-- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-8 min-w-8 px-1.5" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle italic"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4h-9m4 16H5M15 4L9 20"></path></svg>
-</button>
\ No newline at end of file