ScrollArea

v1.0.7

Ready for Production

Catalyst ScrollArea wraps Radix UI's ScrollArea primitive with PMI design tokens, keyboard-accessible focus rings, and hover-reveal scrollbar styling — giving you a production-ready scrollable container with no additional configuration.

Installation

npm install @pmi/catalyst-scroll-area

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
} from '@pmi/catalyst-scroll-area';

Common Patterns

Vertical Scrolling

Scroll vertically through content that exceeds container height.

Horizontal Scrolling

Scroll horizontally through wide content by setting orientation="horizontal" on the scrollbar.

API Reference

ScrollArea is a compound component built on Radix UI primitives. The sections below summarize the shared API surface for each part of the component.

ScrollAreaRoot

The root container that manages scrollbar visibility and overflow.

Accepts all standard Radix ScrollArea Root props (type, scrollHideDelay, dir) and forwards ref. No additional props are defined by Catalyst.

ScrollAreaViewport

The scrollable viewport that contains the content.

Accepts all standard Radix ScrollArea Viewport props and forwards ref. Catalyst adds a visible focus ring (focus-visible:ring-1) and a transparent border that fills on focus for accessible keyboard navigation.

ScrollAreaScrollbar

The scrollbar track. Hidden by default; revealed on container hover.

Accepts all standard Radix ScrollArea Scrollbar props (orientation, forceMount) and forwards ref. No additional props are defined by Catalyst.

ScrollAreaThumb

The draggable thumb within the scrollbar track.

Accepts all standard Radix ScrollArea Thumb props and forwards ref. Custom thumb colors are applied via className.

ScrollAreaCorner

The corner element displayed where vertical and horizontal scrollbars meet. Accepts all standard Radix ScrollArea Corner props.

Accessibility

ScrollArea is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• The scrollable viewport receives tabIndex={0} so keyboard users can focus and scroll it directly.
• Radix UI provides underlying scrollbar role semantics and aria-controls wiring between the scrollbar and viewport.
• Catalyst adds the visible focus ring styling; consumers must ensure sufficient color contrast when overriding with custom className values.
• No additional ARIA labels are required for the scrollbar itself — the scrollable region is announced by screen readers via the Radix primitive.

See the Radix ScrollArea accessibility docs for inherited baseline behavior.

Choosing the Right Component

Use ScrollArea when you need a styled, accessible custom scrollbar inside a bounded container. Reach for a different primitive when:

Related

• Sheet
• Dialog
• Table