ScrollArea

Augments native scroll functionality with custom, cross-browser styled scrollbars

Installation

pnpm add @wandercom/design-system-web

Usage

import { ScrollArea } from '@wandercom/design-system-web';

export function Example() {
  return (
    <ScrollArea className="h-72 w-48 rounded-xl border p-4">
      <h4 className="mb-4 font-medium text-sm">Tags</h4>
      <p>Long scrollable content here...</p>
    </ScrollArea>
  );
}

Examples

Loading example...

The convenience ScrollArea component renders a root, viewport, scrollbar, and corner in a single composable unit. Use the orientation prop to control which scrollbars appear. The example above shows vertical, horizontal, and compound (subcomponent) usage.

Compound Components

For finer control over structure and styling, use the subcomponents directly:

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
} from '@wandercom/design-system-web';

export function Example() {
  return (
    <ScrollAreaRoot className="h-72 w-48">
      <ScrollAreaViewport className="p-4">
        <p>Scrollable content</p>
      </ScrollAreaViewport>
      <ScrollAreaScrollbar orientation="vertical">
        <ScrollAreaThumb />
      </ScrollAreaScrollbar>
    </ScrollAreaRoot>
  );
}

Props

ScrollArea

orientation?

'vertical' | 'horizontal' | 'both'
Which scrollbars to render. Defaults to vertical.

className?

string
Additional CSS classes applied to the root element.

children?

ReactNode
Scrollable content.

ScrollAreaScrollbar

orientation?

'vertical' | 'horizontal'
Scrollbar direction. Defaults to vertical.

keepMounted?

boolean
Keeps the scrollbar mounted even when there is no overflow.

className?

string
Additional CSS classes to apply.

Accessibility

The ScrollArea component is built on Base UI's ScrollArea primitive, which provides native-like scrolling behavior with custom-styled scrollbars.

  • The scrollable viewport is keyboard accessible and can be scrolled with arrow keys when focused
  • Custom scrollbars are rendered alongside native scroll behavior, ensuring assistive technologies interact with the standard scroll container
  • The viewport includes overscroll-contain to prevent scroll chaining to parent containers
  • Focus indicators are provided on the viewport for keyboard navigation visibility
ScrollArea