Scroll Area

Scroll areas keep a surface bounded while still allowing longer content to remain accessible. The Swiss wrapper preserves the Radix viewport model and adds quieter system scrollbars that sit comfortably inside cards, drawers, and dense operational panels.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea className="h-72 w-full border border-border">
  <div className="grid gap-2 p-4">{/* long content */}</div>
</ScrollArea>

Why This Primitive Exists

Not every long list should stretch the whole page. Scroll areas help when a container should keep its assigned size while the content inside it keeps growing.

• Use them for feeds, navigation lists, inspectors, and wide metadata strips.
• Prefer them when the surrounding layout should remain stable.
• Avoid them when full-page document flow is clearer than a nested scrolling region.

Examples

Vertical Overflow

The most common pattern is a bounded list with enough height to preview the content before scrolling.

<ScrollArea className="h-72 border border-border">
  <div className="grid gap-2 p-4">{items}</div>
</ScrollArea>

Horizontal Overflow

Use horizontal scrolling when a row of structured values needs to stay intact instead of wrapping into a harder-to-parse stack.

<ScrollArea className="whitespace-nowrap border border-border">
  <div className="flex min-w-max">{columns}</div>
</ScrollArea>

In Context

Scroll areas work well inside cards and side panels where the shell should stay fixed while the feed or log continues below the fold.

Guidance

Use Bounded Scrolling Deliberately

• Add a scroll area when the parent layout needs a fixed footprint.
• Avoid nested scrolling inside nested scrolling unless the workflow clearly demands it.
• If the content is the page's primary reading surface, let the page scroll instead.

Set A Real Height Or Width

• Give the container an explicit height for vertical overflow or a width constraint for horizontal overflow.
• Without a constrained dimension, there is nothing meaningful for the scroll area to manage.
• Keep the viewport size consistent with the surrounding card or panel rhythm.

Keep Content Structured

• Use row dividers, timestamps, or headings so long lists remain scannable while scrolling.
• Prefer one continuous list per scroll area rather than mixing unrelated modules inside the same viewport.
• Add a horizontal ScrollBar explicitly when the content should scroll sideways.

API Reference

Exports

Notable Props

Built-In Behavior

The wrapper stays close to Radix Scroll Area, so upstream accessibility and pointer behavior remain intact.