ScrollArea

Overview

ScrollArea replaces native scrollbars with custom-styled thin scrollbars that look consistent across all browsers and platforms. Supports vertical and horizontal scrolling.

Scrollable list (30 items)

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

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Usage

<ScrollArea className="h-72 w-full">
  <div className="p-4">
    {/* Long content here */}
  </div>
</ScrollArea>

Horizontal Scrolling

<ScrollArea orientation="horizontal" className="w-full">
  <div className="flex gap-4">
    {items.map(item => <Card key={item.id} className="min-w-[200px]" />)}
  </div>
</ScrollArea>

API Reference

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Scroll direction
`scrollbarVisibility`	`'auto' \| 'always' \| 'hover'`	`'hover'`	Scrollbar visibility
`className`	`string`	—	Container class

Accessibility

Scrollable area is keyboard navigable
Scrollbar is a decorative replacement — native scroll behavior preserved

Component	When to Use Instead
VirtualizedList	Large datasets needing windowing
InfiniteScroll	Load-more pattern