Scroll Area

Usage

import { ScrollArea, ScrollBar } from "@reva/ui";

ScrollArea automatically renders a vertical ScrollBar. To enable horizontal scrolling, render <ScrollBar orientation="horizontal" /> as a sibling inside ScrollArea. Use ScrollArea for bounded scrollable surfaces — its strongest case is horizontal scroll, where native scrollbars are inconsistent and undiscoverable. Don't wrap the document body or virtualised lists.

Composition

Use the following composition to build a ScrollArea:

ScrollArea
├── (scrollable content)
└── ScrollBar

ScrollBar is rendered automatically for the vertical axis. Add <ScrollBar orientation="horizontal" /> as a sibling when content overflows horizontally.

Examples

Horizontal

A row of asset-class cards inside a fixed-width ScrollArea with <ScrollBar orientation="horizontal" />. This is the strongest case for ScrollArea — native horizontal scrollbars are platform-inconsistent and undiscoverable on mobile.

Both axes

Render a ScrollArea with both a vertical and a horizontal ScrollBar for content that overflows on both axes (e.g. wide tables, long activity feeds).

Type

Use the type prop to control when the scrollbar is visible.

• hover — default. Bar appears on hover or scroll. Best for desktop, low-discoverability content.
• always — bar is always visible. Use when the affordance must be discoverable (command palettes, mobile horizontal rows).
• scroll — bar fades in while scrolling, fades out when idle. Bridges hover and always.

Props

ScrollArea and ScrollBar forward props to the Radix primitives. See the Radix UI Scroll Area documentation for the full API.

ScrollArea

ScrollBar