Scroll Views

ScrollArea wraps overflowing content in a viewport with consistent, styled scrollbars that look the same across browsers and platforms. Reach for it whenever a fixed-height region needs to scroll, such as a long list, a code block, or a sidebar of tags, and you want the scrollbar to match the design system rather than the OS default.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: scroll-area.tsx

import { ScrollArea, Separator } from "@beacon/design-system";

const tags = Array.from({ length: 50 }, (_, i) => `Tag ${i + 1}`);

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        <Separator className="my-2" />
      </div>
    ))}
  </div>
</ScrollArea>

Parts

Part	Role
ScrollArea	The container. Set a fixed height (or width) via className; it renders the viewport, a vertical ScrollBar, and a corner automatically.
ScrollBar	The styled scrollbar. Rendered automatically inside ScrollArea; render it yourself with orientation="horizontal" when you need a horizontal bar.

ScrollBar props

Prop	Type	Default	Description
orientation	"vertical" | "horizontal"	"vertical"	Which axis the scrollbar controls.

When to use

• Fixed-height regions that overflow: long lists, log output, tag clusters, sidebars.
• Anywhere you want scrollbars to match the design system across browsers and platforms.

Do not wrap the whole page in a ScrollArea: let the document scroll natively. Reserve it for bounded regions with their own overflow.