ScrollArea
React scroll area with themed cross-browser scrollbars for vertical, horizontal, or both axes. Bounded like native overflow and keyboard scrollable when named.
ScrollArea needs a bounded height or width to scroll, exactly like native overflow. Pass aria-label to name the focusable region.
When to use
Use ScrollArea for bounded panels that scroll independently of the page. Examples: a sidebar menu, a long list inside a card, or a wide table on narrow screens. Give it a fixed height or width, exactly as you would with native overflow.
For page-level scrolling, rely on the browser.
Examples
Props
Props declared by ScrollArea. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | ScrollAreaOrientation | Which scrollbar(s) to render. Default 'vertical'. | |
viewportRef | react.Ref<HTMLDivElement> | Ref to the scrollable viewport - use for programmatic scrolling. | |
viewportProps | Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Extra props forwarded to the viewport element (use viewportRef for the ref).
To drop the extra tab stop when the scrolled content is itself fully focusable
(e.g. a list of links), pass viewportProps={{ tabIndex: -1 }}. | |
aria-label | string | Names the scroll region. Warns (dev only) if neither this nor aria-labelledby is set. | |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. | |
type | "auto" | "always" | "scroll" | "hover" | ||
dir | Direction | ||
scrollHideDelay | number |
Accessibility
Pass aria-label or aria-labelledby to name the region; the viewport then becomes focusable so keyboard users can scroll it with the arrow keys.
The custom scrollbars are visual only. Content inside stays in the normal reading order.