ScrollArea

Atom

Scrollable container with a themed, thin scrollbar (Firefox scrollbar-color + WebKit pseudo-elements) instead of the bulky native default. Supports vertical, horizontal, or both-axis scrolling.

Preview

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

Code

<ScrollArea className="h-40 w-64 rounded-md border border-border p-3">
  <ul className="space-y-2">
    {items.map((item) => <li key={item.id}>{item.label}</li>)}
  </ul>
</ScrollArea>

Preview

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Code

<ScrollArea orientation="horizontal" className="w-full rounded-md border border-border p-3">
  <div className="flex gap-3">
    {cards.map((c) => <Card key={c.id} {...c} />)}
  </div>
</ScrollArea>

ScrollArea

Vertical list

Horizontal