Scroll Area
Augments native scroll functionality with a thin, themed scrollbar.
Usage
Tags
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 7
Tag 8
Tag 9
Tag 10
Tag 11
Tag 12
Tag 13
Tag 14
Tag 15
Tag 16
Tag 17
Tag 18
Tag 19
Tag 20
Tag 21
Tag 22
Tag 23
Tag 24
Tag 25
Tag 26
Tag 27
Tag 28
Tag 29
Tag 30
Tag 31
Tag 32
Tag 33
Tag 34
Tag 35
Tag 36
Tag 37
Tag 38
Tag 39
Tag 40
Tag 41
Tag 42
Tag 43
Tag 44
Tag 45
Tag 46
Tag 47
Tag 48
Tag 49
Tag 50
example.blade.php
1234567891011
<x-slate::scroll-area class="h-72 w-full max-w-sm rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
@foreach (range(1, 50) as $i)
<div class="text-sm">Tag {{ $i }}</div>
@if($i < 50)
<x-slate::separator class="my-2" />
@endif
@endforeach
</div>
</x-slate::scroll-area>Horizontal overflow
Give the area a fixed width and let children overflow on the inline axis.
Alpha
Beta
Gamma
Delta
Epsilon
Zeta
Eta
example.blade.php
1234567
<x-slate::scroll-area class="w-full max-w-md whitespace-nowrap rounded-md border">
<div class="flex w-max gap-3 p-4">
@foreach (['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta'] as $label)
<x-slate::badge variant="secondary">{{ $label }}</x-slate::badge>
@endforeach
</div>
</x-slate::scroll-area>Inside a card
Useful for long lists in constrained layouts like sidebars and settings panels.
Activity
Event 1
Event 2
Event 3
Event 4
Event 5
Event 6
Event 7
Event 8
Event 9
Event 10
Event 11
Event 12
Event 13
Event 14
Event 15
Event 16
Event 17
Event 18
Event 19
Event 20
example.blade.php
123456789101112
<x-slate::card class="max-w-sm">
<x-slate::card-header>
<x-slate::card-title>Activity</x-slate::card-title>
</x-slate::card-header>
<x-slate::card-content class="p-0">
<x-slate::scroll-area class="h-48 px-6">
@foreach (range(1, 20) as $i)
<p class="border-b border-border py-2 text-sm">Event {{ $i }}</p>
@endforeach
</x-slate::scroll-area>
</x-slate::card-content>
</x-slate::card>