0
# Radix UI Scroll Area
1

2
A comprehensive React component for creating accessible scroll areas with customizable scrollbars. Built on Radix UI's accessibility-first design principles, it provides full control over scrollbar appearance and behavior while maintaining keyboard navigation, screen reader compatibility, and cross-browser consistency.
3

4
## Package Information
5

6
- **Package Name**: @radix-ui/react-scroll-area
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @radix-ui/react-scroll-area`
10

11
## Core Imports
12

13
```typescript
14
import {
15
  ScrollArea,
16
  ScrollAreaViewport,
17
  ScrollAreaScrollbar,
18
  ScrollAreaThumb,
19
  ScrollAreaCorner,
20
  createScrollAreaScope,
21
} from "@radix-ui/react-scroll-area";
22
```
23

24
CommonJS:
25

26
```javascript
27
const {
28
  ScrollArea,
29
  ScrollAreaViewport,
30
  ScrollAreaScrollbar,
31
  ScrollAreaThumb,
32
  ScrollAreaCorner,
33
  createScrollAreaScope,
34
} = require("@radix-ui/react-scroll-area");
35
```
36

37
Alternative imports using aliases:
38

39
```typescript
40
import {
41
  Root,
42
  Viewport,
43
  Scrollbar,
44
  Thumb,
45
  Corner,
46
} from "@radix-ui/react-scroll-area";
47
```
48

49
## Basic Usage
50

51
```typescript
52
import React from "react";
53
import {
54
  ScrollArea,
55
  ScrollAreaViewport,
56
  ScrollAreaScrollbar,
57
  ScrollAreaThumb,
58
  ScrollAreaCorner,
59
} from "@radix-ui/react-scroll-area";
60

61
function MyScrollArea() {
62
  return (
63
    <ScrollArea style={{ width: 300, height: 200 }}>
64
      <ScrollAreaViewport style={{ width: "100%", height: "100%" }}>
65
        <div style={{ padding: 16 }}>
66
          {/* Long content that exceeds the viewport */}
67
          {Array.from({ length: 50 }, (_, i) => (
68
            <div key={i} style={{ marginBottom: 8 }}>
69
              Item {i + 1}
70
            </div>
71
          ))}
72
        </div>
73
      </ScrollAreaViewport>
74
      <ScrollAreaScrollbar orientation="vertical">
75
        <ScrollAreaThumb />
76
      </ScrollAreaScrollbar>
77
      <ScrollAreaScrollbar orientation="horizontal">
78
        <ScrollAreaThumb />
79
      </ScrollAreaScrollbar>
80
      <ScrollAreaCorner />
81
    </ScrollArea>
82
  );
83
}
84
```
85

86
## Architecture
87

88
Radix UI Scroll Area follows a compositional API pattern with distinct components:
89

90
- **Root Container**: `ScrollArea` provides the context and coordination for all scrolling behavior
91
- **Viewport**: `ScrollAreaViewport` defines the scrollable viewing area and manages overflow
92
- **Scrollbars**: `ScrollAreaScrollbar` components handle both horizontal and vertical scrolling
93
- **Thumbs**: `ScrollAreaThumb` represents the draggable handle within scrollbars
94
- **Corner**: `ScrollAreaCorner` fills the space when both scrollbars are visible
95
- **Context System**: Uses scoped contexts for component coordination and state management
96

97
## Capabilities
98

99
### Core Components
100

101
The fundamental building blocks for creating scroll areas with full compositional control over layout and behavior.
102

103
```typescript { .api }
104
const ScrollArea: React.ForwardRefExoticComponent<
105
  ScrollAreaProps & React.RefAttributes<ScrollAreaElement>
106
>;
107

108
interface ScrollAreaProps extends React.ComponentPropsWithoutRef<"div"> {
109
  type?: "auto" | "always" | "scroll" | "hover"; // default: "hover"
110
  dir?: "ltr" | "rtl";
111
  scrollHideDelay?: number; // default: 600
112
}
113

114
const ScrollAreaViewport: React.ForwardRefExoticComponent<
115
  ScrollAreaViewportProps & React.RefAttributes<ScrollAreaViewportElement>
116
>;
117

118
interface ScrollAreaViewportProps extends React.ComponentPropsWithoutRef<"div"> {
119
  nonce?: string;
120
}
121
```
122

123
[Core Components](./core-components.md)
124

125
### Scrollbar System
126

127
Customizable scrollbar components that support multiple display modes, orientations, and accessibility features.
128

129
```typescript { .api }
130
const ScrollAreaScrollbar: React.ForwardRefExoticComponent<
131
  ScrollAreaScrollbarProps & React.RefAttributes<ScrollAreaScrollbarElement>
132
>;
133

134
interface ScrollAreaScrollbarProps extends React.ComponentPropsWithoutRef<"div"> {
135
  orientation?: "horizontal" | "vertical";
136
  forceMount?: true;
137
}
138

139
const ScrollAreaThumb: React.ForwardRefExoticComponent<
140
  ScrollAreaThumbProps & React.RefAttributes<ScrollAreaThumbElement>
141
>;
142

143
interface ScrollAreaThumbProps extends React.ComponentPropsWithoutRef<"div"> {
144
  forceMount?: true;
145
}
146
```
147

148
[Scrollbar System](./scrollbar-system.md)
149

150
### Advanced Features
151

152
Corner handling, context management, and advanced configuration options for complex scroll area implementations.
153

154
```typescript { .api }
155
const ScrollAreaCorner: React.ForwardRefExoticComponent<
156
  ScrollAreaCornerProps & React.RefAttributes<ScrollAreaCornerElement>
157
>;
158

159
interface ScrollAreaCornerProps extends React.ComponentPropsWithoutRef<"div"> {}
160

161
function createScrollAreaScope(): Scope;
162
```
163

164
[Advanced Features](./advanced-features.md)
165

166
## Types
167

168
```typescript { .api }
169
type ScrollAreaElement = React.ComponentRef<"div">;
170
type ScrollAreaViewportElement = React.ComponentRef<"div">;
171
type ScrollAreaScrollbarElement = React.ComponentRef<"div">;
172
type ScrollAreaThumbElement = React.ComponentRef<"div">;
173
type ScrollAreaCornerElement = React.ComponentRef<"div">;
174

175
// Context scope type for nested scroll areas
176
type Scope = any;
177

178
// Component aliases
179
const Root: typeof ScrollArea;
180
const Viewport: typeof ScrollAreaViewport;
181
const Scrollbar: typeof ScrollAreaScrollbar;
182
const Thumb: typeof ScrollAreaThumb;
183
const Corner: typeof ScrollAreaCorner;
184
```