ScrollArea

A customizable scrollable container component with smooth scrolling, hover effects, and automatic scrollbar handling. Both vertical and horizontal scrollbars are automatically rendered and shown based on content overflow.
1<ScrollArea style={{ height: "200px", width: "100%" }}>
2  <Flex direction="column" gap={2}>
3    {Array.from({ length: 20 }, (_, i) => (
4      <Text key={i} size="small">
5        Item {i + 1}
6      </Text>
7    ))}
8  </Flex>
9</ScrollArea>

Usage

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

ScrollArea Props

The ScrollArea 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.

Prop

Type

Examples

Vertical Scrolling

A basic vertical scroll area with a list of items. The scrollbar automatically appears when content overflows vertically.

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

Horizontal Scrolling

A horizontal scroll area for wide content like tables or card grids. The scrollbar automatically appears when content overflows horizontally.

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

Both Scrollbars

When content overflows both vertically and horizontally, both scrollbars appear automatically along with the corner element.

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

Scrollbar Type

Control when the scrollbar appears using the type prop.

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

Features

  • Automatic Scrollbars: Both vertical and horizontal scrollbars are always rendered and automatically shown when content overflows
  • Smooth Scrolling: Custom scrollbar with smooth transitions
  • Hover Effects: Scrollbar expands from 4px to 6px on hover
  • Auto Corner: Corner element is automatically added when both scrollbars are visible
  • Scroll Chaining: Scroll continues to parent page when reaching container boundaries
  • Customizable Visibility: Control when scrollbars appear using the type prop

Accessibility

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

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