tallstackui · devajmeireles · May 6, 2026 · May 6, 2026 · May 6, 2026 · May 6, 2026
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -30,7 +30,8 @@
       "WebFetch(domain:cursor.com)",
       "mcp__tallstackui__list-components-tool",
       "mcp__tallstackui__get-component-tool",
-      "Bash(gh issue:*)"
+      "Bash(gh issue:*)",
+      "Bash(sort -t'#' -k2 -n)"
     ]
   }
 }
diff --git a/app/Enums/Examples/V3/Form/Tag.php b/app/Enums/Examples/V3/Form/Tag.php
@@ -20,6 +20,17 @@ class Tag
     <x-tag prefix="#" />
     HTML;
 
+    public const string LAZY = <<<'HTML'
+    <!-- Reject tags shorter than the given minimum.   -->
+    <!-- The prefix character does not count toward it. -->
+
+    <x-tag :lazy="3" />
+
+    <x-tag prefix="@" :lazy="3" />
+
+    <x-tag :lazy="3" :limit="5" wire:model="tags" />
+    HTML;
+
     public const string EVENTS = <<<'HTML'
     <!--
     For the erase event the correct index is

diff --git a/app/Enums/Examples/V3/Ui/Avatar.php b/app/Enums/Examples/V3/Ui/Avatar.php
@@ -138,6 +138,19 @@ class Avatar
     </x-avatar.group>
     HTML;
 
+    public const string AVATAR_GROUP_REVERSE = <<<'HTML'
+    <!-- The first avatar in markup ends on the right; the overlap progresses right-to-left. -->
+    <!-- DOM order is preserved, only the painted overlap is mirrored. -->
+
+    <x-avatar.group reverse>
+        <x-avatar text="A" color="indigo" />
+        <x-avatar text="B" color="emerald" />
+        <x-avatar text="C" color="amber" />
+        <x-avatar text="D" color="pink" />
+        <x-avatar text="E" color="sky" />
+    </x-avatar.group>
+    HTML;
+
     public const string PRESENCE = <<<'HTML'
     <x-avatar image="https://i.pravatar.cc/300" presence />
 

diff --git a/app/Enums/Examples/V3/Ui/Badge.php b/app/Enums/Examples/V3/Ui/Badge.php
@@ -13,7 +13,18 @@ class Badge
     HTML;
 
     public const string ROUND = <<<'HTML'
-    <x-badge text="TallStackUi" round />
+    <!-- Boolean: applies rounded-full -->
+    <x-badge text="Full" round />
+
+    <!-- Size keys: xs, sm, md, lg, xl -->
+    <x-badge text="xs" round="xs" />
+    <x-badge text="sm" round="sm" />
+    <x-badge text="md" round="md" />
+    <x-badge text="lg" round="lg" />
+    <x-badge text="xl" round="xl" />
+
+    <!-- Without the prop, the badge falls back to rounded-md -->
+    <x-badge text="default" />
     HTML;
 
     public const string LEFT_RIGHT = <<<'HTML'

diff --git a/app/Enums/Examples/V3/Ui/Banner.php b/app/Enums/Examples/V3/Ui/Banner.php
@@ -75,6 +75,33 @@ class Banner
     </html>
     HTML;
 
+    public const string ROTATE = <<<'HTML'
+    <!-- Right-to-left marquee. CSS-only — no JS or Alpine. -->
+    <!-- Pause on hover and prefers-reduced-motion are respected. -->
+
+    <x-banner rotate text="Free shipping nationwide!" color="green" />
+
+    <!-- Speeds: slow, normal (default), fast -->
+    <x-banner rotate="slow" text="Take your time reading this." />
+    <x-banner rotate="fast" text="Limited time offer!" color="red" />
+
+    <!-- Combines with animated, close, or the left slot -->
+    <x-banner animated rotate text="I slide in, then I roll." color="blue" />
+    <x-banner rotate close text="Dismissible rolling banner" color="red" />
+
+    <x-banner rotate text="Rolling content with a left tag" color="blue">
+        <x-slot:left>NEW</x-slot>
+    </x-banner>
+    HTML;
+
+    public const string ROTATE_SEPARATOR = <<<'HTML'
+    <!-- text array — joined into a single rolling string -->
+    <x-banner rotate :text="['Free shipping', '15% off', 'Use code XYZ']" color="indigo" />
+
+    <!-- custom separator (default is ' • ') -->
+    <x-banner rotate :text="['One', 'Two', 'Three']" separator=" — " />
+    HTML;
+
     public const string DATES = <<<'HTML'
     <html>
         <body>

diff --git a/app/Enums/Examples/V3/Ui/Carousel.php b/app/Enums/Examples/V3/Ui/Carousel.php
@@ -127,6 +127,14 @@ class Carousel
         x-on:collapse="alert('Lightbox closed')" />
     HTML;
 
+    public const string CAPTION = <<<'HTML'
+    <x-carousel clickable caption="overlay" :images="$images" />
+    HTML;
+
+    public const string CAPTION_FOOTER = <<<'HTML'
+    <x-carousel clickable caption="footer" :images="$images" />
+    HTML;
+
     public const string ASPECT = <<<'HTML'
     <x-carousel :images="[
         ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],

diff --git a/app/Enums/Examples/V3/Ui/Dropdown.php b/app/Enums/Examples/V3/Ui/Dropdown.php
@@ -58,6 +58,52 @@ class Dropdown
     </x-dropdown>
     HTML;
 
+    public const string SIZES = <<<'HTML'
+    <!-- Boolean size flags: xs, sm, md (default), lg -->
+
+    <x-dropdown text="Account" xs>
+        <x-dropdown.items text="Profile" icon="user" />
+    </x-dropdown>
+
+    <x-dropdown text="Account" sm>
+        <x-dropdown.items text="Profile" icon="user" />
+    </x-dropdown>
+
+    <x-dropdown text="Account">
+        <x-dropdown.items text="Profile" icon="user" />
+    </x-dropdown>
+
+    <x-dropdown text="Account" lg>
+        <x-dropdown.items text="Profile" icon="user" />
+    </x-dropdown>
+    HTML;
+
+    public const string WIDTHS = <<<'HTML'
+    <!-- Available widths: xxs, xs, sm, md, lg, xl, 2xl -->
+
+    <x-dropdown text="xxs" width="xxs">
+        <x-dropdown.items text="xxs" icon="user" />
+    </x-dropdown>
+    <x-dropdown text="xs" width="xs">
+        <x-dropdown.items text="xs" icon="user" />
+    </x-dropdown>
+    <x-dropdown text="sm" width="sm">
+        <x-dropdown.items text="sm" icon="user" />
+    </x-dropdown>
+    <x-dropdown text="md" width="md">
+        <x-dropdown.items text="md" icon="user" />
+    </x-dropdown>
+    <x-dropdown text="lg" width="lg">
+        <x-dropdown.items text="lg" icon="user" />
+    </x-dropdown>
+    <x-dropdown text="xl" width="xl">
+        <x-dropdown.items text="xl" icon="user" />
+    </x-dropdown>
+    <x-dropdown text="2xl" width="2xl">
+        <x-dropdown.items text="2xl" icon="user" />
+    </x-dropdown>
+    HTML;
+
     public const string HEADER_SLOTS = <<<'HTML'
     <x-dropdown text="Menu">
         <x-slot:header>

diff --git a/app/Enums/Examples/V3/Ui/Environment.php b/app/Enums/Examples/V3/Ui/Environment.php
@@ -9,7 +9,15 @@ class Environment
     HTML;
 
     public const string ROUND = <<<'HTML'
+    <!-- Boolean: applies rounded-full -->
     <x-environment round />
+
+    <!-- Size keys: xs, sm, md, lg, xl -->
+    <x-environment round="xs" />
+    <x-environment round="sm" />
+    <x-environment round="md" />
+    <x-environment round="lg" />
+    <x-environment round="xl" />
     HTML;
 
     public const string SQUARE = <<<'HTML'

diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
@@ -45,7 +45,7 @@ public function __invoke(Request $request, string $version, ?string $main = null
 
         $example = str($view)->remove(["documentation.$version.", ...$this->versions()])
             ->explode('.')
-            ->map(fn ($item) => str($item)
+            ->map(fn (string $item): string => str($item)
                 ->replace('-', ' ')
                 ->title()
                 ->replace(' ', '')

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
@@ -2,9 +2,15 @@
 
 namespace App\Providers;
 
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\URL;
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\ServiceProvider;
+use TallStackUi\Components\Layout\Header\Component as TsuiLayoutHeader;
+use TallStackUi\Components\Layout\Main\Component as TsuiLayoutMain;
+use TallStackUi\Components\Layout\SideBar\Item\Component as TsuiSideBarItem;
+use TallStackUi\Components\Layout\SideBar\Main\Component as TsuiSideBarMain;
+use TallStackUi\Components\Layout\SideBar\Separator\Component as TsuiSideBarSeparator;
 use TallStackUi\Facades\TallStackUi;
 
 class AppServiceProvider extends ServiceProvider
@@ -16,6 +22,23 @@ public function boot(): void
         $this->configureSharedVariables();
 
         $this->configurePersonalization();
+
+        $this->registerDemoLayoutAliases();
+    }
+
+    /**
+     * The TallStackUI layout family is unregistered globally
+     * (TALLSTACKUI_IGNORE_LAYOUT_REGISTRATION=true) to avoid clashing with this site's
+     * own <x-layout>. We re-register them under <x-tsui-*> aliases so the documentation
+     * iframe demos can render the real components without affecting the site itself.
+     */
+    private function registerDemoLayoutAliases(): void
+    {
+        Blade::component(TsuiLayoutMain::class, 'tsui-layout');
+        Blade::component(TsuiLayoutHeader::class, 'tsui-layout.header');
+        Blade::component(TsuiSideBarMain::class, 'tsui-side-bar');
+        Blade::component(TsuiSideBarItem::class, 'tsui-side-bar.item');
+        Blade::component(TsuiSideBarSeparator::class, 'tsui-side-bar.separator');
     }
 
     private function configureSharedVariables(): void