1<ScrollArea style={{ height: "200px", width: "100%" }}>
2  <ScrollArea.Viewport>
3    <Flex direction="column" gap={2}>
4      {Array.from({ length: 20 }, (_, i) => (
5        <Text key={i} size="small">
6          Item {i + 1}
7        </Text>
8      ))}
9    </Flex>
10  </ScrollArea.Viewport>
11  <ScrollArea.Scrollbar orientation="vertical" />
12</ScrollArea>

Usage

1import { ScrollArea } from "@raystack/apsara";

Component Structure

The ScrollArea component uses a composite pattern, providing modular sub-components for flexible scrollable containers:

• ScrollArea - Root container that manages scrolling state
• ScrollArea.Viewport - The scrollable content area
• ScrollArea.Scrollbar - The scrollbar track and thumb (vertical or horizontal)
• ScrollArea.Corner - The corner element (automatically added when both scrollbars are present)

ScrollArea Props

The ScrollArea root component extends standard HTML div attributes, so you can use props like style, id, onClick, and other standard HTML attributes in addition to the props listed below.

ScrollArea.Viewport Props

The viewport is the scrollable content container. It extends standard HTML div attributes, so you can use props like style, id, onClick, and other standard HTML attributes in addition to the props listed below.

ScrollArea.Scrollbar Props

The scrollbar component renders the scrollbar track and thumb. When both vertical and horizontal scrollbars are present, the Corner component is automatically added. It extends standard HTML div attributes, so you can use props like style, id, and other standard HTML attributes.

ScrollArea.Corner Props

The corner component fills the space where vertical and horizontal scrollbars meet. It's automatically added when both scrollbars are present, but you can also add it manually if needed. It extends standard HTML div attributes, so you can use props like style, id, and other standard HTML attributes.

Examples

Vertical Scrolling

A basic vertical scroll area with a list of items.

1<ScrollArea style={{ height: "200px", width: "300px" }}>
2  <ScrollArea.Viewport>
3    <Flex direction="column" gap={2}>
4      {Array.from({ length: 30 }, (_, i) => (
5        <Text key={i} size="small">
6          Item {i + 1}
7        </Text>
8      ))}
9    </Flex>
10  </ScrollArea.Viewport>
11  <ScrollArea.Scrollbar orientation="vertical" />
12</ScrollArea>

Horizontal Scrolling

A horizontal scroll area for wide content like tables or card grids.

1<ScrollArea style={{ height: "150px", width: "300px" }}>
2  <ScrollArea.Viewport>
3    <Flex direction="row" gap={4} style={{ width: "600px" }}>
4      {Array.from({ length: 10 }, (_, i) => (
5        <Flex key={i} direction="column" gap={2} style={{ minWidth: "150px" }}>
6          <Text weight="medium" size="small">
7            Column {i + 1}
8          </Text>
9          <Text size="small" variant="secondary">
10            Content here
11          </Text>
12        </Flex>
13      ))}
14    </Flex>
15  </ScrollArea.Viewport>
16  <ScrollArea.Scrollbar orientation="horizontal" />
17</ScrollArea>

Both Scrollbars

When both vertical and horizontal scrollbars are present, the Corner component is automatically added to fill the intersection.

1<ScrollArea style={{ height: "200px", width: "300px" }}>
2  <ScrollArea.Viewport>
3    <Flex direction="row" gap={4} style={{ width: "800px" }}>
4      {Array.from({ length: 15 }, (_, i) => (
5        <Flex key={i} direction="column" gap={2} style={{ minWidth: "180px" }}>
6          <Text weight="medium" size="small">
7            Column {i + 1}
8          </Text>
9          {Array.from({ length: 20 }, (_, j) => (
10            <Text key={j} size="small" variant="secondary">
11              Row {j + 1}
12            </Text>
13          ))}
14        </Flex>
15      ))}
16    </Flex>
17  </ScrollArea.Viewport>
18  <ScrollArea.Scrollbar orientation="vertical" />
19  <ScrollArea.Scrollbar orientation="horizontal" />
20</ScrollArea>

Scrollbar Type

Control when the scrollbar appears using the type prop.

1<ScrollArea style={{ height: "200px", width: "300px" }} type="auto">
2  <ScrollArea.Viewport>
3    <Flex direction="column" gap={2}>
4      {Array.from({ length: 20 }, (_, i) => (
5        <Text key={i} size="small">
6          Item {i + 1}
7        </Text>
8      ))}
9    </Flex>
10  </ScrollArea.Viewport>
11  <ScrollArea.Scrollbar orientation="vertical" />
12</ScrollArea>

Features

• Smooth Scrolling: Custom scrollbar with smooth transitions
• Hover Effects: Scrollbar expands from 4px to 6px on hover
• Auto Corner: Automatically adds corner element when both scrollbars are present
• Scroll Chaining: Scroll continues to parent page when reaching container boundaries
• Customizable: Full control over scrollbar visibility and behavior

Accessibility

The ScrollArea component is built on Radix UI primitives and provides:

• Keyboard navigation support
• Screen reader compatibility
• Proper ARIA attributes
• Focus management