Components
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
php artisan blatui:add scroll-area
<x-ui.scroll-area class="h-72 w-48 rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
@foreach (range(1, 20) as $i)
<div class="text-sm">v1.2.0-beta.{{ $i }}</div>
@if ($i < 20)
<x-ui.separator class="my-2" />
@endif
@endforeach
</div>
</x-ui.scroll-area>Horizontal
<x-ui.scroll-area class="w-full max-w-sm rounded-md border whitespace-nowrap">
<div class="flex w-max gap-4 p-4">
@foreach (range(1, 10) as $i)
<figure class="shrink-0">
<div class="bg-muted flex size-32 items-center justify-center rounded-md text-2xl font-semibold">{{ $i }}</div>
<figcaption class="text-muted-foreground pt-2 text-xs">Artwork {{ $i }}</figcaption>
</figure>
@endforeach
</div>
</x-ui.scroll-area>API Reference
Props, slots and exposed methods for
<x-ui.scroll-area>.
Slots
| Slot | Description |
|---|---|
default |
The scrollable content. Constrain the scroll area with sizing classes (e.g. h-72, max-w-sm) and the inner viewport scrolls with a thin, theme-styled scrollbar. Add whitespace-nowrap on the area for horizontal scrolling. |