Scroll Area

Ready

Part of Layout collection

Vertical Scroll

Scrollable content with custom styled scrollbars

Eidetic Design System

A comprehensive component library for building modern web applications with React and TypeScript.

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

Horizontal Scroll

Scroll horizontally through content

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

Features

  • Custom styled scrollbars
  • Vertical and horizontal orientation
  • Configurable max height/width
  • Hover effects on scrollbar

Usage

import { ScrollArea } from '@/components/ui/scroll-area'

// Vertical scroll
<ScrollArea maxHeight="400px">
  <div>Long content...</div>
</ScrollArea>

// Horizontal scroll
<ScrollArea orientation="horizontal">
  <div className="flex">Items...</div>
</ScrollArea>