Scroll Area

Layout
Utility

Scrollable container with customizable scrollbar styling. Supports vertical, horizontal, and bidirectional scrolling with configurable visibility options.

Preview

Vertical scroll 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

Bidirectional

Scroll in both vertical and horizontal directions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

Props

ScrollArea component API reference

PropTypeDefaultDescription
maxHeightstring | number'400px'Maximum height of the scroll area
scrollbarVisibility'auto' | 'always' | 'hover''auto'When to show the scrollbar
orientation'vertical' | 'horizontal' | 'both''vertical'Scroll direction(s) enabled
classNamestring—Additional CSS classes
...propsHTMLAttributes<HTMLDivElement>—All standard div attributes are supported

Usage

Import and implementation example

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

export default function Example() {
  return (
    <>
      {/* Vertical scroll */}
      <ScrollArea maxHeight="400px">
        <div>Long content...</div>
      </ScrollArea>

      {/* Horizontal scroll */}
      <ScrollArea orientation="horizontal">
        <div className="flex gap-4">
          {items.map(item => <Card key={item.id} />)}
        </div>
      </ScrollArea>

      {/* Both directions */}
      <ScrollArea orientation="both" maxHeight="300px">
        <div className="w-[1500px]">Wide and tall content</div>
      </ScrollArea>

      {/* Always visible scrollbar */}
      <ScrollArea scrollbarVisibility="always" maxHeight="300px">
        <div>Content with visible scrollbar</div>
      </ScrollArea>

      {/* Show on hover only */}
      <ScrollArea scrollbarVisibility="hover" maxHeight="300px">
        <div>Scrollbar appears on hover</div>
      </ScrollArea>
    </>
  )
}

Features

Built-in functionality

  • Custom scrollbars: Styled scrollbars matching design system
  • Three orientations: Vertical, horizontal, or both directions
  • Visibility options: Auto, always visible, or show on hover
  • Configurable max height: Set maximum height as string or number
  • Hover effects: Scrollbar thumb highlights on hover
  • Forward ref: Supports ref forwarding for DOM access

Accessibility

Keyboard and screen reader support

ARIA Attributes

tabindex="0" for keyboard focusrole="region" with scroll capabilities

Keyboard Navigation

KeyAction
Arrow KeysScroll content when focused
Page Up/DownScroll by page
Home/EndScroll to start/end

Notes

  • Scrollable region is focusable for keyboard navigation
  • Content inside remains accessible
  • Custom scrollbars do not interfere with assistive technology

Related Components

ResizableCardDataTable