Scroll Area

A scrollable container with a custom styled scrollbar.

bun x bosia@latest add scroll-area

Augments native scroll behavior with a custom-styled scrollbar.

Preview

Vertical

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Horizontal

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Props

Prop Type Default
orientation "vertical" | "horizontal" | "both" "vertical"
class string ""

Usage

<script lang="ts">
	import { ScrollArea } from "$lib/components/ui/scroll-area";
</script>

<ScrollArea class="h-48">
	<!-- content -->
</ScrollArea>