0
# Core Components
1

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

4
## Capabilities
5

6
### ScrollArea (Root)
7

8
The root container component that provides context and coordination for all scrolling behavior.
9

10
```typescript { .api }
11
const ScrollArea: React.ForwardRefExoticComponent<
12
  ScrollAreaProps & React.RefAttributes<ScrollAreaElement>
13
>;
14

15
interface ScrollAreaProps extends React.ComponentPropsWithoutRef<"div"> {
16
  /**
17
   * Scrollbar display mode
18
   * - "auto": Shows scrollbars only when content overflows
19
   * - "always": Always shows scrollbars
20
   * - "scroll": Shows scrollbars during scroll and interaction
21
   * - "hover": Shows scrollbars on hover
22
   */
23
  type?: "auto" | "always" | "scroll" | "hover"; // default: "hover"
24
  
25
  /**
26
   * Text direction for proper scrollbar positioning
27
   */
28
  dir?: "ltr" | "rtl";
29
  
30
  /**
31
   * Delay in milliseconds before hiding scrollbars
32
   */
33
  scrollHideDelay?: number; // default: 600
34
}
35

36
type ScrollAreaElement = React.ComponentRef<"div">;
37
```
38

39
**Usage Examples:**
40

41
```typescript
42
import { ScrollArea } from "@radix-ui/react-scroll-area";
43

44
// Basic scroll area with hover scrollbars
45
<ScrollArea style={{ width: 300, height: 200 }}>
46
  {/* viewport and content */}
47
</ScrollArea>
48

49
// Always visible scrollbars with custom delay
50
<ScrollArea type="always" scrollHideDelay={1000}>
51
  {/* viewport and content */}
52
</ScrollArea>
53

54
// Auto-hiding scrollbars for RTL layouts
55
<ScrollArea type="auto" dir="rtl">
56
  {/* viewport and content */}
57
</ScrollArea>
58
```
59

60
### ScrollAreaViewport
61

62
The viewport container that defines the scrollable viewing area and manages overflow behavior.
63

64
```typescript { .api }
65
const ScrollAreaViewport: React.ForwardRefExoticComponent<
66
  ScrollAreaViewportProps & React.RefAttributes<ScrollAreaViewportElement>
67
>;
68

69
interface ScrollAreaViewportProps extends React.ComponentPropsWithoutRef<"div"> {
70
  /**
71
   * CSP nonce for injected styles that hide native scrollbars
72
   * @default undefined
73
   */
74
  nonce?: string;
75
}
76

77
type ScrollAreaViewportElement = React.ComponentRef<"div">;
78
```
79

80
**Usage Examples:**
81

82
```typescript
83
import { ScrollAreaViewport } from "@radix-ui/react-scroll-area";
84

85
// Basic viewport
86
<ScrollAreaViewport style={{ width: "100%", height: "100%" }}>
87
  <div>Your scrollable content</div>
88
</ScrollAreaViewport>
89

90
// Viewport with CSP nonce
91
<ScrollAreaViewport nonce="your-csp-nonce">
92
  <div>Your scrollable content</div>
93
</ScrollAreaViewport>
94
```
95

96
### Component Aliases
97

98
Shorter alias components for more concise imports and usage.
99

100
```typescript { .api }
101
const Root: typeof ScrollArea;
102
const Viewport: typeof ScrollAreaViewport;
103
```
104

105
**Usage Examples:**
106

107
```typescript
108
import { Root, Viewport } from "@radix-ui/react-scroll-area";
109

110
<Root type="auto">
111
  <Viewport>
112
    <div>Content</div>
113
  </Viewport>
114
</Root>
115
```
116

117
## Key Behaviors
118

119
### CSS Custom Properties
120

121
ScrollArea automatically sets CSS custom properties for styling:
122

123
- `--radix-scroll-area-corner-width`: Width of the corner element
124
- `--radix-scroll-area-corner-height`: Height of the corner element
125
- `--radix-scroll-area-thumb-width`: Width of horizontal scrollbar thumb
126
- `--radix-scroll-area-thumb-height`: Height of vertical scrollbar thumb
127

128
### Native Scrollbar Hiding
129

130
ScrollAreaViewport automatically injects styles to hide native scrollbars across browsers:
131

132
```css
133
[data-radix-scroll-area-viewport] {
134
  scrollbar-width: none;
135
  -ms-overflow-style: none;
136
  -webkit-overflow-scrolling: touch;
137
}
138

139
[data-radix-scroll-area-viewport]::-webkit-scrollbar {
140
  display: none;
141
}
142
```
143

144
### Accessibility Features
145

146
- Maintains native keyboard navigation
147
- Preserves screen reader compatibility
148
- Supports focus management
149
- Respects reduced motion preferences