React ScrollArea component

Preview

import { Box } from '@usefragments/ui';
import { ScrollArea } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';

<Box>

Usage

Use when

Content that overflows a fixed-size container
Tab bars or chip rows that may run past the edge
Scrollable panels, sidebars, and menu content

Avoid when

Whole-page scrolling (use the native body scroll)
Content that can never overflow

Implementation notes

orientation constrains which axis can scroll
showFades hints at hidden content when nothing else does
scrollbarVisibility="auto" shows the thumb only while the area is used, without shifting layout
The container needs a fixed height or the area cannot scroll

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Examples

Horizontal

Keeps an overflowing row of chips on one line.

import { Box } from '@usefragments/ui';
import { Chip } from '@usefragments/ui';
import { ScrollArea } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';

<Box>

With Fades

Edge fades signal there is more content each way.

import { Box } from '@usefragments/ui';
import { Chip } from '@usefragments/ui';
import { ScrollArea } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';

<Box>

Always Scrollbar

The thumb stays visible for content that is always scrolled.

import { Box } from '@usefragments/ui';
import { ScrollArea } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';

<Box>

API reference

Component props
Prop	Type	Default	Description
`aria-label`	`string \| undefined`	Not set	Names the viewport as a region, read when it takes the keyboard
`aria-labelledby`	`string \| undefined`	Not set	Names the scrolling region by another element's id.
`children`Required	`React.ReactNode`	Not set	Scrollable content
`className`	`string \| undefined`	Not set	Additional class name
`orientation`	`ScrollOrientation \| undefinedbothhorizontalvertical`	`vertical`	Scroll direction
`scrollbarVisibility`	`"auto" \| "always" \| undefinedautoalways`	`auto`	When the thin scrollbar shows: auto while scrolling, on hover and while focus is inside; always all the time
`showFades`	`boolean \| undefined`	`false`	Show gradient fade indicators at scroll edges
`dir`	`string \| undefined`	Not set	—

Accessibility

Preserves native scroll behavior and keyboard support across both axes
A viewport that scrolls and holds nothing focusable takes the keyboard; the area rings outside its edge, clear of the fades
aria-label or aria-labelledby names the viewport as a region
The scrollbar shows while focus is inside

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.