Repository: symfony/ux
Pull request #2720 (2025-05-08 07:35:06)

[Toolkit] Add functional tests to render all Kit components usage codes (from their documentation), with a snapshot system
| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | no <!-- required for new features -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Update/add documentation as required (we can help!)
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

This PR add snapshots testing for each Twig code blocks from `src/Toolkit/kits/**/docs/components/*.md`, to ensure that rendering is always good. 

I don't think we will add visual testing, at least for now. Having snapshots tests and visual previews (on the website) feels convenient enough, but if someone has a super-simple solution, why not!)

I tagged the PR as a feature, not because the snapshots testing itself, but because I introduced a new service `KitContextRunner`. I needed something similar than the "hacks" from the website, but for tests. 


Patch:
diff --git a/src/Toolkit/composer.json b/src/Toolkit/composer.json
index dc3a2267..dc0e699d 100644
--- a/src/Toolkit/composer.json
+++ b/src/Toolkit/composer.json
@@ -44,8 +44,12 @@
     "zenstruck/console-test": "^1.7",
     "symfony/http-client": "6.4|^7.0",
     "symfony/stopwatch": "^6.4|^7.0",
-    "symfony/phpunit-bridge": "^6.4|^7.0",
-    "vincentlanglet/twig-cs-fixer": "^3.5"
+    "symfony/phpunit-bridge": "^7.2",
+    "vincentlanglet/twig-cs-fixer": "^3.5",
+    "spatie/phpunit-snapshot-assertions": "^4.2.17",
+    "phpunit/phpunit": "^9.6.22",
+    "symfony/ux-icons": "^2.18",
+    "tales-from-a-dev/twig-tailwind-extra": "^0.4.0"
   },
   "bin": [
     "bin/ux-toolkit-kit-create",
diff --git a/src/Toolkit/config/services.php b/src/Toolkit/config/services.php
index 23a6e528..3406e962 100644
--- a/src/Toolkit/config/services.php
+++ b/src/Toolkit/config/services.php
@@ -13,6 +13,7 @@ namespace Symfony\Component\DependencyInjection\Loader\Configurator;
 
 use Symfony\UX\Toolkit\Command\DebugKitCommand;
 use Symfony\UX\Toolkit\Command\InstallComponentCommand;
+use Symfony\UX\Toolkit\Kit\KitContextRunner;
 use Symfony\UX\Toolkit\Kit\KitFactory;
 use Symfony\UX\Toolkit\Kit\KitSynchronizer;
 use Symfony\UX\Toolkit\Registry\GitHubRegistry;
@@ -75,5 +76,12 @@ return static function (ContainerConfigurator $container): void {
             ->args([
                 service('filesystem'),
             ])
+
+        ->set('ux_toolkit.kit.kit_context_runner', KitContextRunner::class)
+            ->public()
+            ->args([
+                service('twig'),
+                service('ux.twig_component.component_factory'),
+            ])
     ;
 };
diff --git a/src/Toolkit/kits/shadcn/docs/components/AlertDialog.md b/src/Toolkit/kits/shadcn/docs/components/AlertDialog.md
deleted file mode 100644
index 3109e050..00000000
--- a/src/Toolkit/kits/shadcn/docs/components/AlertDialog.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# AlertDialog
-
-A modal dialog that interrupts the user with important content and expects a response.
-
-```twig {"preview":true}
-<twig:AlertDialog>
-    <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline">Show Dialog</twig:Button>
-    </twig:AlertDialog:Trigger>
-    <twig:AlertDialog:Content>
-        <twig:AlertDialog:Header>
-            <twig:AlertDialog:Title>Are you sure?</twig:AlertDialog:Title>
-            <twig:AlertDialog:Description>
-                This action cannot be undone. This will permanently delete your account
-                and remove your data from our servers.
-            </twig:AlertDialog:Description>
-        </twig:AlertDialog:Header>
-        <twig:AlertDialog:Footer>
-            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
-            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
-        </twig:AlertDialog:Footer>
-    </twig:AlertDialog:Content>
-</twig:AlertDialog>
-```
-
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:AlertDialog>
-    <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline">Show Dialog</twig:Button>
-    </twig:AlertDialog:Trigger>
-    <twig:AlertDialog:Content>
-        <twig:AlertDialog:Header>
-            <twig:AlertDialog:Title>Are you sure?</twig:AlertDialog:Title>
-            <twig:AlertDialog:Description>
-                This action cannot be undone. This will permanently delete your account
-                and remove your data from our servers.
-            </twig:AlertDialog:Description>
-        </twig:AlertDialog:Header>
-        <twig:AlertDialog:Footer>
-            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
-            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
-        </twig:AlertDialog:Footer>
-    </twig:AlertDialog:Content>
-</twig:AlertDialog>
-```
-
-### Destructive
-
-```twig {"preview":true}
-<twig:AlertDialog>
-    <twig:AlertDialog:Trigger>
-        <twig:Button variant="destructive">Delete Account</twig:Button>
-    </twig:AlertDialog:Trigger>
-    <twig:AlertDialog:Content>
-        <twig:AlertDialog:Header>
-            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
-            <twig:AlertDialog:Description>
-                This action cannot be undone. This will permanently delete your account
-                and remove your data from our servers.
-            </twig:AlertDialog:Description>
-        </twig:AlertDialog:Header>
-        <twig:AlertDialog:Footer>
-            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
-            <twig:AlertDialog:Action variant="destructive">Delete Account</twig:AlertDialog:Action>
-        </twig:AlertDialog:Footer>
-    </twig:AlertDialog:Content>
-</twig:AlertDialog>
-``` 
diff --git a/src/Toolkit/phpunit.xml.dist b/src/Toolkit/phpunit.xml.dist
index 0b5ea054..0a4c3bed 100644
--- a/src/Toolkit/phpunit.xml.dist
+++ b/src/Toolkit/phpunit.xml.dist
@@ -4,7 +4,7 @@
       backupGlobals="false"
       colors="true"
       bootstrap="tests/bootstrap.php"
-      failOnRisky="true" 
+      failOnRisky="true"
       failOnWarning="true"
 >
   <php>
@@ -12,8 +12,6 @@
     <ini name="error_reporting" value="-1"/>
     <server name="APP_ENV" value="test" force="true"/>
     <server name="SHELL_VERBOSITY" value="-1"/>
-    <server name="SYMFONY_PHPUNIT_REMOVE" value=""/>
-    <server name="SYMFONY_PHPUNIT_VERSION" value="9.5"/>
     <server name="SYMFONY_DEPRECATIONS_HELPER" value="max[total]=999999"/>
     <server name="KERNEL_CLASS" value="Symfony\UX\Toolkit\Tests\Fixtures\Kernel"/>
   </php>
diff --git a/src/Toolkit/src/Kit/KitContextRunner.php b/src/Toolkit/src/Kit/KitContextRunner.php
new file mode 100644
index 00000000..f2cd0e42
--- /dev/null
+++ b/src/Toolkit/src/Kit/KitContextRunner.php
@@ -0,0 +1,107 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Toolkit\Kit;
+
+use Symfony\Component\Filesystem\Path;
+use Symfony\UX\Toolkit\File\FileType;
+use Symfony\UX\TwigComponent\ComponentFactory;
+use Symfony\UX\TwigComponent\ComponentTemplateFinderInterface;
+use Twig\Loader\ChainLoader;
+use Twig\Loader\FilesystemLoader;
+
+/**
+ * @author Hugo Alliaume <hugo@alliau.me>
+ *
+ * @internal
+ */
+final class KitContextRunner
+{
+    public function __construct(
+        private readonly \Twig\Environment $twig,
+        private readonly ComponentFactory $componentFactory,
+    ) {
+    }
+
+    /**
+     * @template TResult of mixed
+     *
+     * @param callable(Kit): TResult $callback
+     *
+     * @return TResult
+     */
+    public function runForKit(Kit $kit, callable $callback): mixed
+    {
+        $resetServices = $this->contextualizeServicesForKit($kit);
+
+        try {
+            return $callback($kit);
+        } finally {
+            $resetServices();
+        }
+    }
+
+    /**
+     * @return callable(): void Reset the services when called
+     */
+    private function contextualizeServicesForKit(Kit $kit): callable
+    {
+        // Configure Twig
+        $initialTwigLoader = $this->twig->getLoader();
+        $this->twig->setLoader(new ChainLoader([
+            new FilesystemLoader(Path::join($kit->path, 'templates/components')),
+            $initialTwigLoader,
+        ]));
+
+        // Configure Twig Components
+        $reflComponentFactory = new \ReflectionClass($this->componentFactory);
+
+        $reflComponentFactoryConfig = $reflComponentFactory->getProperty('config');
+        $initialComponentFactoryConfig = $reflComponentFactoryConfig->getValue($this->componentFactory);
+        $reflComponentFactoryConfig->setValue($this->componentFactory, []);
+
+        $reflComponentFactoryComponentTemplateFinder = $reflComponentFactory->getProperty('componentTemplateFinder');
+        $initialComponentFactoryComponentTemplateFinder = $reflComponentFactoryComponentTemplateFinder->getValue($this->componentFactory);
+        $reflComponentFactoryComponentTemplateFinder->setValue($this->componentFactory, $this->createComponentTemplateFinder($kit));
+
+        return function () use ($initialTwigLoader, $reflComponentFactoryConfig, $initialComponentFactoryConfig, $reflComponentFactoryComponentTemplateFinder, $initialComponentFactoryComponentTemplateFinder) {
+            $this->twig->setLoader($initialTwigLoader);
+            $reflComponentFactoryConfig->setValue($this->componentFactory, $initialComponentFactoryConfig);
+            $reflComponentFactoryComponentTemplateFinder->setValue($this->componentFactory, $initialComponentFactoryComponentTemplateFinder);
+        };
+    }
+
+    private function createComponentTemplateFinder(Kit $kit): ComponentTemplateFinderInterface
+    {
+        static $instances = [];
+
+        return $instances[$kit->name] ?? new class($kit) implements ComponentTemplateFinderInterface {
+            public function __construct(private readonly Kit $kit)
+            {
+            }
+
+            public function findAnonymousComponentTemplate(string $name): ?string
+            {
+                if (null === $component = $this->kit->getComponent($name)) {
+                    throw new \RuntimeException(\sprintf('Component "%s" does not exist in kit "%s".', $name, $this->kit->name));
+                }
+
+                foreach ($component->files as $file) {
+                    if (FileType::Twig === $file->type) {
+                        return $file->relativePathName;
+                    }
+                }
+
+                throw new \LogicException(\sprintf('No Twig files found for component "%s" in kit "%s", it should not happens.', $name, $this->kit->name));
+            }
+        };
+    }
+}
diff --git a/ux.symfony.com/src/Controller/Toolkit/ComponentsController.php b/ux.symfony.com/src/Controller/Toolkit/ComponentsController.php
index bb70a547..f0bb2599 100644
--- a/ux.symfony.com/src/Controller/Toolkit/ComponentsController.php
+++ b/ux.symfony.com/src/Controller/Toolkit/ComponentsController.php
@@ -23,12 +23,7 @@ use Symfony\Component\HttpKernel\Attribute\MapQueryParameter;
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
 use Symfony\Component\HttpKernel\Profiler\Profiler;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\UX\Toolkit\File\FileType;
-use Symfony\UX\Toolkit\Kit\Kit;
-use Symfony\UX\TwigComponent\ComponentFactory;
-use Symfony\UX\TwigComponent\ComponentTemplateFinderInterface;
-use Twig\Loader\ChainLoader;
-use Twig\Loader\FilesystemLoader;
+use Symfony\UX\Toolkit\Kit\KitContextRunner;
 
 class ComponentsController extends AbstractController
 {
@@ -75,8 +70,8 @@ class ComponentsController extends AbstractController
         #[MapQueryParameter] string $height,
         UriSigner $uriSigner,
         \Twig\Environment $twig,
-        #[Autowire(service: 'ux.twig_component.component_factory')]
-        ComponentFactory $componentFactory,
+        #[Autowire(service: 'ux_toolkit.kit.kit_context_runner')]
+        KitContextRunner $kitContextRunner,
         #[Autowire(service: 'profiler')]
         ?Profiler $profiler,
     ): Response {
@@ -88,34 +83,6 @@ class ComponentsController extends AbstractController
 
         $kit = $this->toolkitService->getKit($kitId);
 
-        $twig->setLoader(new ChainLoader([
-            new FilesystemLoader($kit->path.\DIRECTORY_SEPARATOR.'templates'.\DIRECTORY_SEPARATOR.'components'),
-            $twig->getLoader(),
-        ]));
-
-        $this->tweakComponentFactory(
-            $componentFactory,
-            new class($kit) implements ComponentTemplateFinderInterface {
-                public function __construct(
-                    private readonly Kit $kit,
-                ) {
-                }
-
-                public function findAnonymousComponentTemplate(string $name): ?string
-                {
-                    if ($component = $this->kit->getComponent($name)) {
-                        foreach ($component->files as $file) {
-                            if (FileType::Twig === $file->type) {
-                                return $file->relativePathName;
-                            }
-                        }
-                    }
-
-                    return null;
-                }
-            }
-        );
-
         $template = $twig->createTemplate(<<<HTML
 <html lang="en">
     <head>
@@ -129,24 +96,9 @@ class ComponentsController extends AbstractController
 HTML);
 
         return new Response(
-            $twig->render($template),
+            $kitContextRunner->runForKit($kit, fn () => $twig->render($template)),
             Response::HTTP_OK,
             ['X-Robots-Tag' => 'noindex, nofollow']
         );
     }
-
-    /**
-     * Tweak the ComponentFactory to render anonymous components from the Toolkit kit.
-     * TODO: In the future, we should implement multiple directories for anonymous components.
-     */
-    private function tweakComponentFactory(ComponentFactory $componentFactory, ComponentTemplateFinderInterface $componentTemplateFinder): void
-    {
-        $refl = new \ReflectionClass($componentFactory);
-
-        $propertyConfig = $refl->getProperty('config');
-        $propertyConfig->setValue($componentFactory, []);
-
-        $propertyComponentTemplateFinder = $refl->getProperty('componentTemplateFinder');
-        $propertyComponentTemplateFinder->setValue($componentFactory, $componentTemplateFinder);
-    }
 }


Test patch:
diff --git a/src/Toolkit/tests/Fixtures/Kernel.php b/src/Toolkit/tests/Fixtures/Kernel.php
index 7ea7eb05..6734bb54 100644
--- a/src/Toolkit/tests/Fixtures/Kernel.php
+++ b/src/Toolkit/tests/Fixtures/Kernel.php
@@ -16,8 +16,11 @@ use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait;
 use Symfony\Bundle\TwigBundle\TwigBundle;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 use Symfony\Component\HttpKernel\Kernel as BaseKernel;
+use Symfony\UX\Icons\UXIconsBundle;
 use Symfony\UX\Toolkit\UXToolkitBundle;
 use Symfony\UX\TwigComponent\TwigComponentBundle;
+use TalesFromADev\Twig\Extra\Tailwind\Bridge\Symfony\Bundle\TalesFromADevTwigExtraTailwindBundle;
+use Twig\Extra\TwigExtraBundle\TwigExtraBundle;
 
 final class Kernel extends BaseKernel
 {
@@ -29,6 +32,9 @@ final class Kernel extends BaseKernel
             new FrameworkBundle(),
             new TwigBundle(),
             new TwigComponentBundle(),
+            new TwigExtraBundle(),
+            new UXIconsBundle(),
+            new TalesFromADevTwigExtraTailwindBundle(),
             new UXToolkitBundle(),
         ];
     }
@@ -69,6 +75,9 @@ final class Kernel extends BaseKernel
 
             ->alias('ux_toolkit.registry.registry_factory', '.ux_toolkit.registry.registry_factory')
                 ->public()
+
+            ->alias('ux_toolkit.registry.local', '.ux_toolkit.registry.local')
+                ->public()
         ;
     }
 }
diff --git a/src/Toolkit/tests/Functional/ComponentsRenderingTest.php b/src/Toolkit/tests/Functional/ComponentsRenderingTest.php
new file mode 100644
index 00000000..39978c8a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/ComponentsRenderingTest.php
@@ -0,0 +1,110 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Toolkit\Tests\Functional;
+
+use Spatie\Snapshots\Drivers\HtmlDriver;
+use Spatie\Snapshots\MatchesSnapshots;
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+use Symfony\Component\Filesystem\Path;
+use Symfony\Component\Finder\Finder;
+use Symfony\UX\Toolkit\Asset\Component;
+use Symfony\UX\Toolkit\Kit\Kit;
+use Symfony\UX\Toolkit\Kit\KitFactory;
+use Symfony\UX\Toolkit\Registry\LocalRegistry;
+
+class ComponentsRenderingTest extends WebTestCase
+{
+    use MatchesSnapshots;
+
+    private const KITS_DIR = __DIR__.'/../../kits';
+
+    /**
+     * @return iterable<string, string, string>
+     */
+    public static function provideTestComponentRendering(): iterable
+    {
+        foreach (LocalRegistry::getAvailableKitsName() as $kitName) {
+            $kitDir = Path::join(__DIR__, '../../kits', $kitName, 'docs/components');
+            $docsFinder = (new Finder())->files()->name('*.md')->in($kitDir)->depth(0);
+
+            foreach ($docsFinder as $docFile) {
+                $componentName = $docFile->getFilenameWithoutExtension();
+
+                $codeBlockMatchesResult = preg_match_all('/```twig.*?\n(?P<code>.+?)```/s', $docFile->getContents(), $codeBlockMatches);
+                if (false === $codeBlockMatchesResult || 0 === $codeBlockMatchesResult) {
+                    throw new \RuntimeException(\sprintf('No Twig code blocks found in file "%s"', $docFile->getRelativePathname()));
+                }
+
+                foreach ($codeBlockMatches['code'] as $i => $code) {
+                    yield \sprintf('Kit %s, component %s, code #%d', $kitName, $componentName, $i + 1) => [$kitName, $componentName, $code];
+                }
+            }
+        }
+    }
+
+    /**
+     * @dataProvider provideTestComponentRendering
+     */
+    public function testComponentRendering(string $kitName, string $componentName, string $code): void
+    {
+        $twig = self::getContainer()->get('twig');
+        $kitContextRunner = self::getContainer()->get('ux_toolkit.kit.kit_context_runner');
+
+        $kit = $this->instantiateKit($kitName);
+        $template = $twig->createTemplate($code);
+        $renderedCode = $kitContextRunner->runForKit($kit, fn () => $template->render());
+
+        $this->assertCodeRenderedMatchesHtmlSnapshot($kit, $kit->getComponent($componentName), $code, $renderedCode);
+    }
+
+    private function instantiateKit(string $kitName): Kit
+    {
+        $kitFactory = self::getContainer()->get('ux_toolkit.kit.kit_factory');
+
+        self::assertInstanceOf(KitFactory::class, $kitFactory);
+
+        return $kitFactory->createKitFromAbsolutePath(Path::join(__DIR__, '../../kits', $kitName));
+    }
+
+    private function assertCodeRenderedMatchesHtmlSnapshot(Kit $kit, Component $component, string $code, string $renderedCode): void
+    {
+        $info = \sprintf(<<<HTML
+            <!--
+            - Kit: %s
+            - Component: %s
+            - Code:
+            ```twig
+            %s
+            ```
+            - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+            HTML,
+            $kit->name,
+            $component->name,
+            trim($code)
+        );
+
+        $this->assertMatchesSnapshot($renderedCode, new class($info) extends HtmlDriver {
+            public function __construct(private string $info)
+            {
+            }
+
+            public function serialize($data): string
+            {
+                $serialized = parent::serialize($data);
+                $serialized = str_replace(['<html><body>', '</body></html>'], '', $serialized);
+                $serialized = trim($serialized);
+
+                return $this->info."\n".$serialized;
+            }
+        });
+    }
+}
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 1__1.html
new file mode 100644
index 00000000..c3586e29
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 1__1.html
@@ -0,0 +1,20 @@
+<!--
+- Kit: Shadcn UI
+- Component: Alert
+- Code:
+```twig
+<twig:Alert class="max-w-lg">
+    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
+    <twig:Alert:Title>Heads up!</twig:Alert:Title>
+    <twig:Alert:Description>
+        You can add components to your app using the cli.
+    </twig:Alert:Description>
+</twig:Alert>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative w-full rounded-lg border p-4 [&amp;&gt;svg~*]:pl-7 [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:left-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg]:text-foreground bg-background text-foreground max-w-lg" role="alert">
+<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
+    <h5 class="mb-1 font-medium leading-none tracking-tight ">Heads up!</h5>
+    <p class="text-sm [&amp;_p]:leading-relaxed ">You can add components to your app using the cli.
+    </p>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 2__1.html
new file mode 100644
index 00000000..c3586e29
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 2__1.html
@@ -0,0 +1,20 @@
+<!--
+- Kit: Shadcn UI
+- Component: Alert
+- Code:
+```twig
+<twig:Alert class="max-w-lg">
+    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
+    <twig:Alert:Title>Heads up!</twig:Alert:Title>
+    <twig:Alert:Description>
+        You can add components to your app using the cli.
+    </twig:Alert:Description>
+</twig:Alert>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative w-full rounded-lg border p-4 [&amp;&gt;svg~*]:pl-7 [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:left-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg]:text-foreground bg-background text-foreground max-w-lg" role="alert">
+<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
+    <h5 class="mb-1 font-medium leading-none tracking-tight ">Heads up!</h5>
+    <p class="text-sm [&amp;_p]:leading-relaxed ">You can add components to your app using the cli.
+    </p>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 3__1.html
new file mode 100644
index 00000000..87ea2e3a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 3__1.html
@@ -0,0 +1,20 @@
+<!--
+- Kit: Shadcn UI
+- Component: Alert
+- Code:
+```twig
+<twig:Alert variant="destructive" class="max-w-lg">
+    <twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
+    <twig:Alert:Title>Error</twig:Alert:Title>
+    <twig:Alert:Description>
+        Your session has expired. Please log in again.
+    </twig:Alert:Description>
+</twig:Alert>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative w-full rounded-lg border p-4 [&amp;&gt;svg~*]:pl-7 [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:left-4 [&amp;&gt;svg]:top-4 border-destructive/50 text-destructive dark:border-destructive [&amp;&gt;svg]:text-destructive max-w-lg" role="alert">
+<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-4v4m0 4h.01"></path></svg>
+    <h5 class="mb-1 font-medium leading-none tracking-tight ">Error</h5>
+    <p class="text-sm [&amp;_p]:leading-relaxed ">Your session has expired. Please log in again.
+    </p>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 1__1.html
new file mode 100644
index 00000000..6f089ea8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 1__1.html
@@ -0,0 +1,17 @@
+<!--
+- Kit: Shadcn UI
+- Component: AspectRatio
+- Code:
+```twig
+<twig:AspectRatio ratio="1 / 1" class="max-w-[300px]">
+    <img 
+        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" 
+        alt="Landscape photograph by Tobias Tullius"
+        class="h-full w-full rounded-md object-cover"
+    />
+</twig:AspectRatio>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div style="aspect-ratio: 1 / 1; " class="max-w-[300px]">
+<img src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" alt="Landscape photograph by Tobias Tullius" class="h-full w-full rounded-md object-cover">
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 2__1.html
new file mode 100644
index 00000000..b20d51b0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 2__1.html
@@ -0,0 +1,17 @@
+<!--
+- Kit: Shadcn UI
+- Component: AspectRatio
+- Code:
+```twig
+<twig:AspectRatio ratio="1 / 1" class="max-w-[350px]">
+    <img 
+        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" 
+        alt="Landscape photograph by Tobias Tullius"
+        class="h-full w-full rounded-md object-cover"
+    />
+</twig:AspectRatio>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div style="aspect-ratio: 1 / 1; " class="max-w-[350px]">
+<img src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" alt="Landscape photograph by Tobias Tullius" class="h-full w-full rounded-md object-cover">
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 3__1.html
new file mode 100644
index 00000000..297a8d71
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component AspectRatio, code 3__1.html
@@ -0,0 +1,17 @@
+<!--
+- Kit: Shadcn UI
+- Component: AspectRatio
+- Code:
+```twig
+<twig:AspectRatio ratio="16 / 9" class="max-w-[350px]">
+    <img 
+        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" 
+        alt="Landscape photograph by Tobias Tullius"
+        class="h-full w-full rounded-md object-cover"
+    />
+</twig:AspectRatio>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div style="aspect-ratio: 16 / 9; " class="max-w-[350px]">
+<img src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" alt="Landscape photograph by Tobias Tullius" class="h-full w-full rounded-md object-cover">
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 1__1.html
new file mode 100644
index 00000000..e1c7e6ee
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 1__1.html
@@ -0,0 +1,13 @@
+<!--
+- Kit: Shadcn UI
+- Component: Avatar
+- Code:
+```twig
+<twig:Avatar>
+    <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
+</twig:Avatar>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
+
+</span>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 2__1.html
new file mode 100644
index 00000000..e1c7e6ee
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 2__1.html
@@ -0,0 +1,13 @@
+<!--
+- Kit: Shadcn UI
+- Component: Avatar
+- Code:
+```twig
+<twig:Avatar>
+    <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
+</twig:Avatar>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
+
+</span>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 3__1.html
new file mode 100644
index 00000000..7ef48de0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 3__1.html
@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Avatar
+- Code:
+```twig
+<div class="flex gap-1">
+    <twig:Avatar>
+        <twig:Avatar:Text>FP</twig:Avatar:Text>
+    </twig:Avatar>
+    <twig:Avatar>
+        <twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
+    </twig:Avatar>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex gap-1">
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
+    </span>
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
+    </span>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 4__1.html
new file mode 100644
index 00000000..c16030c2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Avatar, code 4__1.html
@@ -0,0 +1,27 @@
+<!--
+- Kit: Shadcn UI
+- Component: Avatar
+- Code:
+```twig
+<div class="flex -space-x-2">
+    <twig:Avatar>
+        <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
+    </twig:Avatar>
+    <twig:Avatar>
+        <twig:Avatar:Text>FP</twig:Avatar:Text>
+    </twig:Avatar>
+    <twig:Avatar>
+        <twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
+    </twig:Avatar>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex -space-x-2">
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
+
+    </span>
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
+    </span>
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
+    </span>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 1__1.html
new file mode 100644
index 00000000..7b3a1ebd
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 1__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Badge
+- Code:
+```twig
+<twig:Badge>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 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">Badge</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 2__1.html
new file mode 100644
index 00000000..7b3a1ebd
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 2__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Badge
+- Code:
+```twig
+<twig:Badge>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 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">Badge</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 3__1.html
new file mode 100644
index 00000000..a32c304a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 3__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Badge
+- Code:
+```twig
+<twig:Badge variant="secondary">
+    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 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">Badge
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 4__1.html
new file mode 100644
index 00000000..18c1b14f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 4__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Badge
+- Code:
+```twig
+<twig:Badge variant="outline">
+    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 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">Badge
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 5__1.html
new file mode 100644
index 00000000..5cdce6f8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 5__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Badge
+- Code:
+```twig
+<twig:Badge variant="destructive">
+    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 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80">Badge
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 6__1.html
new file mode 100644
index 00000000..c2dbe836
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 6__1.html
@@ -0,0 +1,15 @@
+<!--
+- Kit: Shadcn UI
+- Component: Badge
+- Code:
+```twig
+<twig:Badge>
+    <twig:ux:icon name="lucide:check" class="mr-1 h-3 w-3" />
+    Verified
+</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 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
+<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="mr-1 h-3 w-3" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+    Verified
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 1__1.html
new file mode 100644
index 00000000..a7cb9999
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 1__1.html
@@ -0,0 +1,47 @@
+<!--
+- Kit: Shadcn UI
+- Component: Breadcrumb
+- Code:
+```twig
+<twig:Breadcrumb>
+    <twig:Breadcrumb:List>
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator />
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator />
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator />
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
+        </twig:Breadcrumb:Item>
+    </twig:Breadcrumb:List>
+</twig:Breadcrumb>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 ">
+<li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Home</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+
+        <li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Docs</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+
+        <li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Components</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+
+        <li class="inline-flex items-center gap-1.5 ">
+<span class="font-normal text-foreground " role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>
+        </li>
+    </ol>
+</nav>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 2__1.html
new file mode 100644
index 00000000..a7cb9999
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 2__1.html
@@ -0,0 +1,47 @@
+<!--
+- Kit: Shadcn UI
+- Component: Breadcrumb
+- Code:
+```twig
+<twig:Breadcrumb>
+    <twig:Breadcrumb:List>
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator />
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator />
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator />
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
+        </twig:Breadcrumb:Item>
+    </twig:Breadcrumb:List>
+</twig:Breadcrumb>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 ">
+<li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Home</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+
+        <li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Docs</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+
+        <li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Components</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+
+        <li class="inline-flex items-center gap-1.5 ">
+<span class="font-normal text-foreground " role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>
+        </li>
+    </ol>
+</nav>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 3__1.html
new file mode 100644
index 00000000..d55f2526
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 3__1.html
@@ -0,0 +1,56 @@
+<!--
+- Kit: Shadcn UI
+- Component: Breadcrumb
+- Code:
+```twig
+<twig:Breadcrumb>
+    <twig:Breadcrumb:List>
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator>
+            <twig:ux:icon name="lucide:slash" />
+        </twig:Breadcrumb:Separator>
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator>
+            <twig:ux:icon name="lucide:slash" />
+        </twig:Breadcrumb:Separator>
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
+        </twig:Breadcrumb:Item>
+        <twig:Breadcrumb:Separator>
+            <twig:ux:icon name="lucide:slash" />
+        </twig:Breadcrumb:Separator>
+        <twig:Breadcrumb:Item>
+            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
+        </twig:Breadcrumb:Item>
+    </twig:Breadcrumb:List>
+</twig:Breadcrumb>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 ">
+<li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Home</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true">
+<svg xmlns="https://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="M22 2L2 22"></path></svg>
+        </li>
+        <li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Docs</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true">
+<svg xmlns="https://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="M22 2L2 22"></path></svg>
+        </li>
+        <li class="inline-flex items-center gap-1.5 ">
+<a class="transition-colors hover:text-foreground " href=".">Components</a>
+        </li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true">
+<svg xmlns="https://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="M22 2L2 22"></path></svg>
+        </li>
+        <li class="inline-flex items-center gap-1.5 ">
+<span class="font-normal text-foreground " role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>
+        </li>
+    </ol>
+</nav>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 10__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 10__1.html
new file mode 100644
index 00000000..cccc5550
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 10__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button>
+    <twig:ux:icon name="lucide:mail" /> Login with Email
+</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg> Login with Email
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 11__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 11__1.html
new file mode 100644
index 00000000..3268a717
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 11__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button disabled>
+    <twig:ux:icon name="lucide:loader-2" class="animate-spin" /> 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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" disabled><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="animate-spin" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></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 shadcn, component Button, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 1__1.html
new file mode 100644
index 00000000..adc6db76
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 1__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button>
+    Click me
+</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Click me
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 2__1.html
new file mode 100644
index 00000000..adc6db76
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 2__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button>
+    Click me
+</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Click me
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 3__1.html
new file mode 100644
index 00000000..8d5d34c2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 3__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button>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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Button</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 4__1.html
new file mode 100644
index 00000000..51fee137
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 4__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button variant="outline">Outline</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">Outline</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 5__1.html
new file mode 100644
index 00000000..609ce7dc
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 5__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button variant="destructive">Destructive</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2">Destructive</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 6__1.html
new file mode 100644
index 00000000..51fee137
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 6__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button variant="outline">Outline</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">Outline</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 7__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 7__1.html
new file mode 100644
index 00000000..b787ff13
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 7__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button variant="ghost">Ghost</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">Ghost</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 8__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 8__1.html
new file mode 100644
index 00000000..0bdafc6e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 8__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button variant="link">Link</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-primary underline-offset-4 hover:underline h-10 px-4 py-2">Link</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 9__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 9__1.html
new file mode 100644
index 00000000..331e9217
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Button, code 9__1.html
@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button
+- Code:
+```twig
+<twig:Button variant="outline" size="icon">
+    <twig:ux:icon name="lucide:chevron-right" />
+</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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10"><svg xmlns="https://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="m9 18l6-6l-6-6"></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 Card, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 1__1.html
new file mode 100644
index 00000000..0adf24f0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 1__1.html
@@ -0,0 +1,33 @@
+<!--
+- Kit: Shadcn UI
+- Component: Card
+- Code:
+```twig
+<twig:Card class="w-[350px]">
+    <twig:Card:Header>
+        <twig:Card:Title>Card Title</twig:Card:Title>
+        <twig:Card:Description>Card Description</twig:Card:Description>
+    </twig:Card:Header>
+    <twig:Card:Content>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+    </twig:Card:Content>
+    <twig:Card:Footer class="justify-between">
+        <twig:Button variant="outline">Cancel</twig:Button>
+        <twig:Button>Action</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="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]">
+<div class="flex flex-col space-y-1.5 p-6 ">
+<div class="text-2xl font-semibold leading-none tracking-tight ">Card Title</div>
+        <div class="text-sm text-muted-foreground ">Card Description</div>
+    </div>
+    <div class="p-6 pt-0 ">
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+    </div>
+    <div class="flex items-center p-6 pt-0 justify-between">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">Cancel</button>
+        <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Action</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 2__1.html
new file mode 100644
index 00000000..0adf24f0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 2__1.html
@@ -0,0 +1,33 @@
+<!--
+- Kit: Shadcn UI
+- Component: Card
+- Code:
+```twig
+<twig:Card class="w-[350px]">
+    <twig:Card:Header>
+        <twig:Card:Title>Card Title</twig:Card:Title>
+        <twig:Card:Description>Card Description</twig:Card:Description>
+    </twig:Card:Header>
+    <twig:Card:Content>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+    </twig:Card:Content>
+    <twig:Card:Footer class="justify-between">
+        <twig:Button variant="outline">Cancel</twig:Button>
+        <twig:Button>Action</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="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]">
+<div class="flex flex-col space-y-1.5 p-6 ">
+<div class="text-2xl font-semibold leading-none tracking-tight ">Card Title</div>
+        <div class="text-sm text-muted-foreground ">Card Description</div>
+    </div>
+    <div class="p-6 pt-0 ">
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+    </div>
+    <div class="flex items-center p-6 pt-0 justify-between">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">Cancel</button>
+        <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Action</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 3__1.html
new file mode 100644
index 00000000..9171b0e8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Card, code 3__1.html
@@ -0,0 +1,85 @@
+<!--
+- Kit: Shadcn UI
+- Component: Card
+- Code:
+```twig
+{% set notifications = [
+  { title: "Your call has been confirmed.", description: "1 hour ago"},
+  { title: "You have a new message!",  description: "1 hour ago"},
+  { title: "Your subscription is expiring soon!", description: "2 hours ago" },
+] %}
+<twig:Card class="w-[350px]">
+    <twig:Card:Header>
+        <twig:Card:Title>Notifications</twig:Card:Title>
+        <twig:Card:Description>You have 3 unread messages.</twig:Card:Description>
+    </twig:Card:Header>
+    <twig:Card:Content>
+        {%- for notification in notifications -%}
+            <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+                <div class="space-y-1">
+                    <p class="text-sm font-medium leading-none">
+                        {{ notification.title }}
+                    </p>
+                    <p class="text-sm text-muted-foreground">
+                        {{ notification.description }}
+                    </p>
+                </div>
+            </div>  
+        {%- endfor -%}
+    </twig:Card:Content>
+    <twig:Card:Footer>
+        <twig:Button class="w-full">
+            <twig:ux:icon name="lucide:check" /> 
+            Mark all as read
+        </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="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]">
+<div class="flex flex-col space-y-1.5 p-6 ">
+<div class="text-2xl font-semibold leading-none tracking-tight ">Notifications</div>
+        <div class="text-sm text-muted-foreground ">You have 3 unread messages.</div>
+    </div>
+    <div class="p-6 pt-0 ">
+<div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+                <div class="space-y-1">
+                    <p class="text-sm font-medium leading-none">
+                        Your call has been confirmed.
+                    </p>
+                    <p class="text-sm text-muted-foreground">
+                        1 hour ago
+                    </p>
+                </div>
+            </div>
+<div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+                <div class="space-y-1">
+                    <p class="text-sm font-medium leading-none">
+                        You have a new message!
+                    </p>
+                    <p class="text-sm text-muted-foreground">
+                        1 hour ago
+                    </p>
+                </div>
+            </div>
+<div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+                <div class="space-y-1">
+                    <p class="text-sm font-medium leading-none">
+                        Your subscription is expiring soon!
+                    </p>
+                    <p class="text-sm text-muted-foreground">
+                        2 hours ago
+                    </p>
+                </div>
+            </div>
+</div>
+    <div class="flex items-center p-6 pt-0 ">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"><svg xmlns="https://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="M20 6L9 17l-5-5"></path></svg> 
+            Mark all as read
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 1__1.html
new file mode 100644
index 00000000..543639db
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 1__1.html
@@ -0,0 +1,20 @@
+<!--
+- Kit: Shadcn UI
+- Component: Checkbox
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Checkbox id="terms" />
+    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+    </label>
+</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">
+    <input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="terms">
+
+    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+    </label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 2__1.html
new file mode 100644
index 00000000..543639db
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 2__1.html
@@ -0,0 +1,20 @@
+<!--
+- Kit: Shadcn UI
+- Component: Checkbox
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Checkbox id="terms" />
+    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+    </label>
+</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">
+    <input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="terms">
+
+    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+    </label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 3__1.html
new file mode 100644
index 00000000..169aee18
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 3__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Checkbox
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Checkbox id="terms" />
+    <twig:Label for="terms">Accept terms and conditions</twig:Label>
+</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">
+    <input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="terms">
+
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="terms">Accept terms and conditions</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 4__1.html
new file mode 100644
index 00000000..70ca0d83
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Checkbox, code 4__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Checkbox
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Checkbox id="terms" disabled />
+    <twig:Label for="terms">Accept terms and conditions</twig:Label>
+</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">
+    <input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="terms" disabled>
+
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="terms">Accept terms and conditions</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 1__1.html
new file mode 100644
index 00000000..1e51cbcd
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 1__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input
+- Code:
+```twig
+<twig:Input type="email" placeholder="Email" class="max-w-sm" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 max-w-sm" placeholder="Email">
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 2__1.html
new file mode 100644
index 00000000..1e51cbcd
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 2__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input
+- Code:
+```twig
+<twig:Input type="email" placeholder="Email" class="max-w-sm" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 max-w-sm" placeholder="Email">
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 3__1.html
new file mode 100644
index 00000000..426ba17d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 3__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <label for="picture">Picture</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 for="picture">Picture</label>
+    <input type="file" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="picture">
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 4__1.html
new file mode 100644
index 00000000..9ef448ac
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 4__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input
+- Code:
+```twig
+<twig:Input type="email" placeholder="Email" disabled class="max-w-sm" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 max-w-sm" placeholder="Email" disabled>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 5__1.html
new file mode 100644
index 00000000..3ee2727d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 5__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="email">Email</twig:Label>
+    <twig:Input type="email" id="email" />
+</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="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="email">Email</label>
+    <input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="email">
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 6__1.html
new file mode 100644
index 00000000..1811212c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Input, code 6__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input
+- Code:
+```twig
+<div class="flex w-full max-w-sm items-center space-x-2">
+    <twig:Input type="email" id="email" />
+    <twig:Button type="submit">Subscribe</twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex w-full max-w-sm items-center space-x-2">
+    <input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="email">
+
+    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" type="submit">Subscribe</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 1__1.html
new file mode 100644
index 00000000..c085f9db
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 1__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Label
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Checkbox id="terms" />
+    <twig:Label for="terms">Accept terms and conditions</twig:Label>
+</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">
+    <input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="terms">
+
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="terms">Accept terms and conditions</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 2__1.html
new file mode 100644
index 00000000..c085f9db
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 2__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Label
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Checkbox id="terms" />
+    <twig:Label for="terms">Accept terms and conditions</twig:Label>
+</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">
+    <input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="terms">
+
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="terms">Accept terms and conditions</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 3__1.html
new file mode 100644
index 00000000..2ac19e5f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 3__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Label
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="email">Email</twig:Label>
+    <twig:Input type="email" id="email" placeholder="Enter your email" />
+</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="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="email">Email</label>
+    <input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="email" placeholder="Enter your email">
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 4__1.html
new file mode 100644
index 00000000..ccf0432e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Label, code 4__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Label
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="email" class="after:content-['*'] after:ml-0.5 after:text-red-500">Email</twig:Label>
+    <twig:Input type="email" id="email" placeholder="Enter your email" />
+</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="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 after:content-['*'] after:ml-0.5 after:text-red-500" for="email">Email</label>
+    <input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="email" placeholder="Enter your email">
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 1__1.html
new file mode 100644
index 00000000..54da00b1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 1__1.html
@@ -0,0 +1,60 @@
+<!--
+- Kit: Shadcn UI
+- 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="#" isActive>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:Ellipsis />
+        </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="mx-auto flex w-full justify-center " role="navigation"><ul class="flex flex-row items-center gap-1 ">
+<li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" aria-label="Go to previous page" href="#"><svg xmlns="https://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="m15 18l-6-6l6-6"></path></svg>
+    <span>Previous</span>
+</a>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">1</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10" aria-current="page" href="#">2</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">3</a>
+        </li>
+        <li>
+<span aria-hidden="true" class="flex h-9 w-9 items-center justify-center ">
+    <svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+    <span class="sr-only">More pages</span>
+</span>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" aria-label="Go to next page" href="#"><span>Next</span>
+    <svg xmlns="https://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="m9 18l6-6l-6-6"></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 shadcn, component Pagination, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 2__1.html
new file mode 100644
index 00000000..54da00b1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 2__1.html
@@ -0,0 +1,60 @@
+<!--
+- Kit: Shadcn UI
+- 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="#" isActive>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:Ellipsis />
+        </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="mx-auto flex w-full justify-center " role="navigation"><ul class="flex flex-row items-center gap-1 ">
+<li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" aria-label="Go to previous page" href="#"><svg xmlns="https://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="m15 18l-6-6l6-6"></path></svg>
+    <span>Previous</span>
+</a>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">1</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10" aria-current="page" href="#">2</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">3</a>
+        </li>
+        <li>
+<span aria-hidden="true" class="flex h-9 w-9 items-center justify-center ">
+    <svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+    <span class="sr-only">More pages</span>
+</span>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" aria-label="Go to next page" href="#"><span>Next</span>
+    <svg xmlns="https://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="m9 18l6-6l-6-6"></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 shadcn, component Pagination, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 3__1.html
new file mode 100644
index 00000000..cbdcec49
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Pagination, code 3__1.html
@@ -0,0 +1,82 @@
+<!--
+- Kit: Shadcn UI
+- 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:Ellipsis />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">4</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#" isActive>5</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">6</twig:Pagination:Link>
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Ellipsis />
+        </twig:Pagination:Item>
+        <twig:Pagination:Item>
+            <twig:Pagination:Link href="#">9</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="mx-auto flex w-full justify-center " role="navigation"><ul class="flex flex-row items-center gap-1 ">
+<li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" aria-label="Go to previous page" href="#"><svg xmlns="https://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="m15 18l-6-6l6-6"></path></svg>
+    <span>Previous</span>
+</a>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">1</a>
+        </li>
+        <li>
+<span aria-hidden="true" class="flex h-9 w-9 items-center justify-center ">
+    <svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+    <span class="sr-only">More pages</span>
+</span>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">4</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10" aria-current="page" href="#">5</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">6</a>
+        </li>
+        <li>
+<span aria-hidden="true" class="flex h-9 w-9 items-center justify-center ">
+    <svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+    <span class="sr-only">More pages</span>
+</span>
+
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 w-10" href="#">9</a>
+        </li>
+        <li>
+<a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" aria-label="Go to next page" href="#"><span>Next</span>
+    <svg xmlns="https://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="m9 18l6-6l-6-6"></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 shadcn, component Progress, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 1__1.html
new file mode 100644
index 00000000..0731fbc0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 1__1.html
@@ -0,0 +1,11 @@
+<!--
+- Kit: Shadcn UI
+- Component: Progress
+- Code:
+```twig
+<twig:Progress value="33" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-67%)"></div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 2__1.html
new file mode 100644
index 00000000..0731fbc0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 2__1.html
@@ -0,0 +1,11 @@
+<!--
+- Kit: Shadcn UI
+- Component: Progress
+- Code:
+```twig
+<twig:Progress value="33" />
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-67%)"></div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 3__1.html
new file mode 100644
index 00000000..2fcf5c28
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 3__1.html
@@ -0,0 +1,24 @@
+<!--
+- Kit: Shadcn UI
+- Component: Progress
+- Code:
+```twig
+<div class="flex flex-col gap-2 w-sm">
+    <div class="flex items-center justify-between">
+        <twig:Label>Loading</twig:Label>
+        <span class="text-sm text-muted-foreground">33%</span>
+    </div>
+    <twig:Progress value="33" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-2 w-sm">
+    <div class="flex items-center justify-between">
+        <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Loading</label>
+        <span class="text-sm text-muted-foreground">33%</span>
+    </div>
+    <div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-67%)"></div>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 4__1.html
new file mode 100644
index 00000000..0256b1db
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Progress, code 4__1.html
@@ -0,0 +1,36 @@
+<!--
+- Kit: Shadcn UI
+- Component: Progress
+- Code:
+```twig
+<div class="flex flex-col gap-1.5 w-sm">
+    <twig:Progress value="0" />
+    <twig:Progress value="25" />
+    <twig:Progress value="50" />
+    <twig:Progress value="75" />
+    <twig:Progress value="100" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col gap-1.5 w-sm">
+    <div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-100%)"></div>
+</div>
+
+    <div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-75%)"></div>
+</div>
+
+    <div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-50%)"></div>
+</div>
+
+    <div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-25%)"></div>
+</div>
+
+    <div class="relative h-4 w-full overflow-hidden rounded-full bg-secondary " role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
+    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-0%)"></div>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 1__1.html
new file mode 100644
index 00000000..4d34ca57
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 1__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Select
+- Code:
+```twig
+<twig:Select class="max-w-sm">
+    <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="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 max-w-sm"><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 shadcn, component Select, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 2__1.html
new file mode 100644
index 00000000..4d34ca57
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 2__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Select
+- Code:
+```twig
+<twig:Select class="max-w-sm">
+    <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="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 max-w-sm"><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 shadcn, component Select, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 3__1.html
new file mode 100644
index 00000000..c989fe3e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 3__1.html
@@ -0,0 +1,22 @@
+<!--
+- Kit: Shadcn UI
+- Component: Select
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="framework">Framework</twig:Label>
+    <twig:Select id="framework">
+        <option value="symfony">Symfony</option>
+        <option value="laravel">Laravel</option>
+        <option value="tempest">Tempest</option>
+    </twig:Select>
+</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="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="framework">Framework</label>
+    <select class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 " id="framework"><option value="symfony">Symfony</option>
+        <option value="laravel">Laravel</option>
+        <option value="tempest">Tempest</option>
+    </select>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 4__1.html
new file mode 100644
index 00000000..f82b4538
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Select, code 4__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Select
+- Code:
+```twig
+<twig:Select disabled class="max-w-sm">
+    <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="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 max-w-sm" 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 shadcn, component Separator, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 1__1.html
new file mode 100644
index 00000000..565b8f66
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 1__1.html
@@ -0,0 +1,45 @@
+<!--
+- Kit: Shadcn UI
+- Component: Separator
+- Code:
+```twig
+<div class="max-w-sm">
+    <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
+        <p class="text-sm text-muted-foreground">
+            Symfony UX initiative: a JavaScript ecosystem for Symfony
+        </p>
+    </div>
+    <twig:Separator class="my-4" />
+    <div class="flex h-5 items-center space-x-4 text-sm">
+        <a href="https://ux.symfony.com" class="hover:underline">Website</a>
+        <twig:Separator orientation="vertical" />
+        <a href="https://ux.symfony.com/packages" class="hover:underline">Packages</a>
+        <twig:Separator orientation="vertical" />
+        <a href="https://github.com/symfony/ux" class="hover:underline">Source</a>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-sm">
+    <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
+        <p class="text-sm text-muted-foreground">
+            Symfony UX initiative: a JavaScript ecosystem for Symfony
+        </p>
+    </div>
+    <div class="shrink-0 bg-border h-[1px] w-full my-4" role="none">
+</div>
+
+    <div class="flex h-5 items-center space-x-4 text-sm">
+        <a href="https://ux.symfony.com" class="hover:underline">Website</a>
+        <div class="shrink-0 bg-border h-full w-[1px]" role="none">
+</div>
+
+        <a href="https://ux.symfony.com/packages" class="hover:underline">Packages</a>
+        <div class="shrink-0 bg-border h-full w-[1px]" role="none">
+</div>
+
+        <a href="https://github.com/symfony/ux" class="hover:underline">Source</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 2__1.html
new file mode 100644
index 00000000..c1a0775b
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 2__1.html
@@ -0,0 +1,45 @@
+<!--
+- Kit: Shadcn UI
+- Component: Separator
+- Code:
+```twig
+<div>
+    <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
+        <p class="text-sm text-muted-foreground">
+            Symfony UX initiative: a JavaScript ecosystem for Symfony
+        </p>
+    </div>
+    <twig:Separator class="my-4" />
+    <div class="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <twig:Separator orientation="vertical" />
+        <div>Docs</div>
+        <twig:Separator orientation="vertical" />
+        <div>Source</div>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div>
+    <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
+        <p class="text-sm text-muted-foreground">
+            Symfony UX initiative: a JavaScript ecosystem for Symfony
+        </p>
+    </div>
+    <div class="shrink-0 bg-border h-[1px] w-full my-4" role="none">
+</div>
+
+    <div class="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <div class="shrink-0 bg-border h-full w-[1px]" role="none">
+</div>
+
+        <div>Docs</div>
+        <div class="shrink-0 bg-border h-full w-[1px]" role="none">
+</div>
+
+        <div>Source</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 3__1.html
new file mode 100644
index 00000000..dbd41253
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Separator, code 3__1.html
@@ -0,0 +1,25 @@
+<!--
+- Kit: Shadcn UI
+- Component: Separator
+- Code:
+```twig
+<div class="flex h-5 items-center gap-4 text-sm">
+    <div>Blog</div>
+    <twig:Separator orientation="vertical" />
+    <div>Docs</div>
+    <twig:Separator orientation="vertical" />
+    <div>Source</div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex h-5 items-center gap-4 text-sm">
+    <div>Blog</div>
+    <div class="shrink-0 bg-border h-full w-[1px]" role="none">
+</div>
+
+    <div>Docs</div>
+    <div class="shrink-0 bg-border h-full w-[1px]" role="none">
+</div>
+
+    <div>Source</div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 1__1.html
new file mode 100644
index 00000000..49970694
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 1__1.html
@@ -0,0 +1,24 @@
+<!--
+- Kit: Shadcn UI
+- Component: Skeleton
+- Code:
+```twig
+<div class="flex items-center space-x-4">
+    <twig:Skeleton class="h-12 w-12 rounded-full" />
+    <div class="space-y-2">
+        <twig:Skeleton class="h-4 w-[250px]" />
+        <twig:Skeleton class="h-4 w-[200px]" />
+    </div>
+</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-4">
+    <div class="animate-pulse rounded-full bg-muted h-12 w-12 rounded-full"></div>
+
+    <div class="space-y-2">
+        <div class="animate-pulse rounded-full bg-muted h-4 w-[250px]"></div>
+
+        <div class="animate-pulse rounded-full bg-muted h-4 w-[200px]"></div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 2__1.html
new file mode 100644
index 00000000..49970694
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 2__1.html
@@ -0,0 +1,24 @@
+<!--
+- Kit: Shadcn UI
+- Component: Skeleton
+- Code:
+```twig
+<div class="flex items-center space-x-4">
+    <twig:Skeleton class="h-12 w-12 rounded-full" />
+    <div class="space-y-2">
+        <twig:Skeleton class="h-4 w-[250px]" />
+        <twig:Skeleton class="h-4 w-[200px]" />
+    </div>
+</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-4">
+    <div class="animate-pulse rounded-full bg-muted h-12 w-12 rounded-full"></div>
+
+    <div class="space-y-2">
+        <div class="animate-pulse rounded-full bg-muted h-4 w-[250px]"></div>
+
+        <div class="animate-pulse rounded-full bg-muted h-4 w-[200px]"></div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 3__1.html
new file mode 100644
index 00000000..dd9e56d7
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Skeleton, code 3__1.html
@@ -0,0 +1,24 @@
+<!--
+- Kit: Shadcn UI
+- Component: Skeleton
+- Code:
+```twig
+<div class="space-y-3">
+    <twig:Skeleton class="h-[125px] w-[250px] rounded-lg" />
+    <div class="space-y-2">
+        <twig:Skeleton class="h-4 w-[250px]" />
+        <twig:Skeleton class="h-4 w-[200px]" />
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="space-y-3">
+    <div class="animate-pulse rounded-full bg-muted h-[125px] w-[250px] rounded-lg"></div>
+
+    <div class="space-y-2">
+        <div class="animate-pulse rounded-full bg-muted h-4 w-[250px]"></div>
+
+        <div class="animate-pulse rounded-full bg-muted h-4 w-[200px]"></div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 1__1.html
new file mode 100644
index 00000000..d8b44e43
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 1__1.html
@@ -0,0 +1,19 @@
+<!--
+- Kit: Shadcn UI
+- Component: Switch
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Switch id="airplane-mode" />
+    <twig:Label for="airplane-mode">Airplane Mode</twig:Label>
+</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">
+    <label class="relative inline-flex items-center cursor-pointer ">
+    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" id="airplane-mode">
+    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+</label>
+
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="airplane-mode">Airplane Mode</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 2__1.html
new file mode 100644
index 00000000..d8b44e43
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 2__1.html
@@ -0,0 +1,19 @@
+<!--
+- Kit: Shadcn UI
+- Component: Switch
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <twig:Switch id="airplane-mode" />
+    <twig:Label for="airplane-mode">Airplane Mode</twig:Label>
+</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">
+    <label class="relative inline-flex items-center cursor-pointer ">
+    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" id="airplane-mode">
+    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+</label>
+
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="airplane-mode">Airplane Mode</label>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 3__1.html
new file mode 100644
index 00000000..69fc9494
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Switch, code 3__1.html
@@ -0,0 +1,53 @@
+<!--
+- Kit: Shadcn UI
+- Component: Switch
+- Code:
+```twig
+<form action="/" method="post">
+    <h3 class="mb-4 text-lg font-medium">Email Notifications</h3>
+    <div class="flex flex-col gap-3">
+        <div class="gap-2 flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+                <twig:Label class="text-base" for="marketing-emails">Marketing emails</twig:Label>
+                <p class="text-sm text-muted-foreground">Receive emails about new products, features, and more.</p>
+            </div>
+            <twig:Switch id="marketing-emails" />
+        </div>
+        <div class="gap-2 flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+                <twig:Label class="text-base" for="security-emails">Security emails</twig:Label>
+                <p class="text-sm text-muted-foreground">Receive emails about your account security.</p>
+            </div>
+            <twig:Switch id="security-emails" checked disabled />
+        </div>
+    </div>
+</form>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<form action="/" method="post">
+    <h3 class="mb-4 text-lg font-medium">Email Notifications</h3>
+    <div class="flex flex-col gap-3">
+        <div class="gap-2 flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+                <label class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-base" for="marketing-emails">Marketing emails</label>
+                <p class="text-sm text-muted-foreground">Receive emails about new products, features, and more.</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer ">
+    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" id="marketing-emails">
+    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+</label>
+
+        </div>
+        <div class="gap-2 flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+                <label class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-base" for="security-emails">Security emails</label>
+                <p class="text-sm text-muted-foreground">Receive emails about your account security.</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer ">
+    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" id="security-emails" checked disabled>
+    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+</label>
+
+        </div>
+    </div>
+</form>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Table, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Table, code 1__1.html
new file mode 100644
index 00000000..4b75f309
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Table, code 1__1.html
@@ -0,0 +1,65 @@
+<!--
+- Kit: Shadcn UI
+- Component: Table
+- Code:
+```twig
+{%- set invoices = [
+  { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" },
+  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
+  { invoice: "INV003", paymentStatus: "Unpaid", totalAmount: "$350.00", paymentMethod: "Bank Transfer" },
+] -%}
+<twig:Table>
+    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
+    <twig:Table:Header>
+        <twig:Table:Row>
+            <twig:Table:Head class="w-[100px]">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>
+        {% for invoice in invoices %}
+            <twig:Table:Row>
+                <twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
+                <twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
+            </twig:Table:Row>
+        {% endfor %}
+    </twig:Table:Body>
+</twig:Table>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative w-full overflow-auto">
+    <table class="w-full caption-bottom text-sm ">
+<caption class="mt-4 text-sm text-muted-foreground ">A list of your recent invoices.</caption>
+    <thead class="[&amp;_tr]:border-b ">
+<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 w-[100px]">Invoice</th>
+            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 ">Status</th>
+            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 ">Method</th>
+            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 text-right">Amount</th>
+        </tr>
+    </thead>
+    <tbody class="[&amp;_tr:last-child]:border-0 ">            <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV001</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Paid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Credit Card</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$250.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV002</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Pending</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">PayPal</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$150.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV003</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Unpaid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Bank Transfer</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$350.00</td>
+            </tr>
+            </tbody>
+</table>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Table, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Table, code 2__1.html
new file mode 100644
index 00000000..b9f6244f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Table, code 2__1.html
@@ -0,0 +1,105 @@
+<!--
+- Kit: Shadcn UI
+- Component: Table
+- Code:
+```twig
+{%- set invoices = [
+  { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" },
+  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
+  { invoice: "INV003", paymentStatus: "Unpaid", totalAmount: "$350.00", paymentMethod: "Bank Transfer" },
+  { invoice: "INV004", paymentStatus: "Paid", totalAmount: "$450.00", paymentMethod: "Credit Card" },
+  { invoice: "INV005", paymentStatus: "Paid", totalAmount: "$550.00", paymentMethod: "PayPal" },
+  { invoice: "INV006", paymentStatus: "Pending", totalAmount: "$200.00", paymentMethod: "Bank Transfer" },
+  { invoice: "INV007", paymentStatus: "Unpaid", totalAmount: "$300.00", paymentMethod: "Credit Card" },
+] -%}
+<twig:Table>
+    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
+    <twig:Table:Header>
+        <twig:Table:Row>
+            <twig:Table:Head class="w-[100px]">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>
+        {% for invoice in invoices %}
+            <twig:Table:Row>
+                <twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
+                <twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
+                <twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
+            </twig:Table:Row>
+        {% endfor %}
+    </twig:Table:Body>
+    <twig:Table:Footer>
+        <twig:Table:Row>
+            <twig:Table:Cell colspan="3">Total</twig:Table:Cell>
+            <twig:Table:Cell class="text-right">$1,500.00</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): -->
+<div class="relative w-full overflow-auto">
+    <table class="w-full caption-bottom text-sm ">
+<caption class="mt-4 text-sm text-muted-foreground ">A list of your recent invoices.</caption>
+    <thead class="[&amp;_tr]:border-b ">
+<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 w-[100px]">Invoice</th>
+            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 ">Status</th>
+            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 ">Method</th>
+            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 text-right">Amount</th>
+        </tr>
+    </thead>
+    <tbody class="[&amp;_tr:last-child]:border-0 ">            <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV001</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Paid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Credit Card</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$250.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV002</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Pending</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">PayPal</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$150.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV003</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Unpaid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Bank Transfer</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$350.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV004</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Paid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Credit Card</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$450.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV005</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Paid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">PayPal</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$550.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV006</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Pending</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Bank Transfer</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$200.00</td>
+            </tr>
+                    <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium">INV007</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Unpaid</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 ">Credit Card</td>
+                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$300.00</td>
+            </tr>
+            </tbody>
+    <tfoot class="border-t bg-muted/50 font-medium [&amp;&gt;tr]:last:border-b-0 ">
+<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted ">
+<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 " colspan="3">Total</td>
+            <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 text-right">$1,500.00</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 shadcn, component Textarea, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 1__1.html
new file mode 100644
index 00000000..49c8bdd6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 1__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- 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="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm 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 shadcn, component Textarea, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 2__1.html
new file mode 100644
index 00000000..49c8bdd6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 2__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- 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="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm 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 shadcn, component Textarea, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 3__1.html
new file mode 100644
index 00000000..61f1f01f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 3__1.html
@@ -0,0 +1,16 @@
+<!--
+- Kit: Shadcn UI
+- Component: Textarea
+- Code:
+```twig
+<div class="grid w-sm gap-1.5">
+    <label for="message">Your message</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 for="message">Your message</label>
+    <textarea class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm " 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 shadcn, component Textarea, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 4__1.html
new file mode 100644
index 00000000..ff0e2502
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Textarea, code 4__1.html
@@ -0,0 +1,9 @@
+<!--
+- Kit: Shadcn UI
+- 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="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-w-sm" placeholder="Type your message here." disabled></textarea>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Kit/KitContextRunnerTest.php b/src/Toolkit/tests/Kit/KitContextRunnerTest.php
new file mode 100644
index 00000000..7cfe77c4
--- /dev/null
+++ b/src/Toolkit/tests/Kit/KitContextRunnerTest.php
@@ -0,0 +1,63 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Toolkit\Tests\Kit;
+
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\UX\Toolkit\Kit\KitContextRunner;
+use Symfony\UX\TwigComponent\ComponentFactory;
+use Symfony\UX\TwigComponent\ComponentTemplateFinder;
+use Symfony\UX\TwigComponent\ComponentTemplateFinderInterface;
+
+class KitContextRunnerTest extends KernelTestCase
+{
+    public function testRunForKitShouldConfigureThenResetServices(): void
+    {
+        $twig = self::getContainer()->get('twig');
+        $initialTwigLoader = $twig->getLoader();
+
+        $componentFactory = self::getContainer()->get('ux.twig_component.component_factory');
+        $initialComponentFactoryState = $this->extractComponentFactoryState($componentFactory);
+        $this->assertInstanceOf(ComponentTemplateFinder::class, $initialComponentFactoryState['componentTemplateFinder']);
+        $this->assertIsArray($initialComponentFactoryState['config']);
+
+        $executed = false;
+        $kitContextRunner = self::getContainer()->get('ux_toolkit.kit.kit_context_runner');
+        $kitContextRunner->runForKit(self::getContainer()->get('ux_toolkit.registry.local')->getKit('shadcn'), function () use (&$executed, $twig, $initialTwigLoader, $componentFactory, $initialComponentFactoryState) {
+            $executed = true;
+
+            $this->assertNotEquals($initialTwigLoader, $twig->getLoader(), 'The Twig loader must be different in this current kit-aware context.');
+            $this->assertNotEquals($initialComponentFactoryState, $this->extractComponentFactoryState($componentFactory), 'The ComponentFactory state must be different in this current kit-aware context.');
+
+            $template = $twig->createTemplate('<twig:AspectRatio ratio="{{ 16 / 9 }}">Hello world</twig:AspectRatio>');
+            $renderedTemplate = $template->render();
+
+            $this->assertNotEmpty($renderedTemplate);
+            $this->assertStringContainsString('Hello world', $renderedTemplate);
+            $this->assertStringContainsString('style="aspect-ratio:', $renderedTemplate);
+        });
+        $this->assertTrue($executed, \sprintf('The callback passed to %s::runForKit() has not been executed.', KitContextRunner::class));
+
+        $this->assertEquals($initialTwigLoader, $twig->getLoader(), 'The Twig loader must be back to its original implementation.');
+        $this->assertEquals($initialComponentFactoryState, $this->extractComponentFactoryState($componentFactory), 'The ComponentFactory must be back to its original state.');
+    }
+
+    /**
+     * @return array{componentTemplateFinder: ComponentTemplateFinderInterface::class, config: array}
+     */
+    private function extractComponentFactoryState(ComponentFactory $componentFactory): array
+    {
+        $componentTemplateFinder = \Closure::bind(fn (ComponentFactory $componentFactory) => $componentFactory->componentTemplateFinder, null, $componentFactory)($componentFactory);
+        $config = \Closure::bind(fn (ComponentFactory $componentFactory) => $componentFactory->config, null, $componentFactory)($componentFactory);
+
+        return ['componentTemplateFinder' => $componentTemplateFinder, 'config' => $config];
+    }
+}