Scroll Area

<twig:ScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4">
        <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
        {% for i in range(50, 1, -1) %}
            <div class="text-sm">v1.2.0-beta.{{ i }}</div>
            <twig:Separator class="my-2" />
        {% endfor %}
    </div>
</twig:ScrollArea>

php bin/console ux:install scroll-area --kit shadcn

composer require twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

{# @block content The scrollable content. #}
<div
    data-slot="scroll-area"
    {{ attributes.defaults({
        class: 'relative overflow-auto [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:bg-clip-padding [&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/50'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</div>

<twig:ScrollArea class="w-96 rounded-md border whitespace-nowrap">
    <div class="flex w-max space-x-4 p-4">
        <figure class="shrink-0">
            <div class="overflow-hidden rounded-md">
                <img src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80" alt="Photo by Ornella Binni" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
            </div>
            <figcaption class="pt-2 text-xs text-muted-foreground">
                Photo by
                <span class="font-semibold text-foreground">Ornella Binni</span>
            </figcaption>
        </figure>
        <figure class="shrink-0">
            <div class="overflow-hidden rounded-md">
                <img src="https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80" alt="Photo by Tom Byrom" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
            </div>
            <figcaption class="pt-2 text-xs text-muted-foreground">
                Photo by
                <span class="font-semibold text-foreground">Tom Byrom</span>
            </figcaption>
        </figure>
        <figure class="shrink-0">
            <div class="overflow-hidden rounded-md">
                <img src="https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80" alt="Photo by Vladimir Malyavko" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
            </div>
            <figcaption class="pt-2 text-xs text-muted-foreground">
                Photo by
                <span class="font-semibold text-foreground">Vladimir Malyavko</span>
            </figcaption>
        </figure>
    </div>
</twig:ScrollArea>

<div class="flex flex-col items-center gap-8">
    {# Arabic #}
    <twig:ScrollArea dir="rtl" class="h-72 w-48 rounded-md border">
        <div class="p-4">
            <h4 class="mb-4 text-sm leading-none font-medium">العلامات</h4>
            {% for i in range(50, 1, -1) %}
                <div class="text-sm">v1.2.0-beta.{{ i }}</div>
                <twig:Separator class="my-2" />
            {% endfor %}
        </div>
    </twig:ScrollArea>

    {# Hebrew #}
    <twig:ScrollArea dir="rtl" class="h-72 w-48 rounded-md border">
        <div class="p-4">
            <h4 class="mb-4 text-sm leading-none font-medium">תגיות</h4>
            {% for i in range(50, 1, -1) %}
                <div class="text-sm">v1.2.0-beta.{{ i }}</div>
                <twig:Separator class="my-2" />
            {% endfor %}
        </div>
    </twig:ScrollArea>
</div>