ScrollArea
Augments native scroll with a custom, cross-browser scrollbar so a fixed-height region (a long list, a code block, a wide table) scrolls inside a bounded box instead of growing the page. Reach for it when content has a known max size and you want a visible, consistent scrollbar across browsers. Prefer ScrollFade when you want a soft gradient edge cue rather than a visible bar, and skip both when the whole page should scroll natively. Add a horizontal ScrollBar as a child only when content overflows sideways; the vertical bar ships by default. Built on @radix-ui/react-scroll-area.
Vertical
<ScrollArea className="h-[240px] w-[220px] rounded-md border border-border">
<div className="p-4">
<h4 className="mb-3 text-base font-medium">Tags</h4>
{tags.map((tag) => (
<div key={tag}>
<div className="text-base">{tag}</div>
<Separator className="my-2" />
</div>
))}
</div>
</ScrollArea>Horizontal
<ScrollArea className="w-[420px] rounded-md border border-border whitespace-nowrap">
<div className="flex w-max gap-4 p-4">
{photos.map((p) => (
<figure key={p.artist} className="shrink-0">
<div className="overflow-hidden rounded-md">
<img src={p.src} alt={`Photo by ${p.artist}`} className="aspect-[3/4] h-[180px] w-[135px] object-cover" />
</div>
<figcaption className="pt-2 text-sm text-muted-foreground">
Photo by <span className="font-medium text-foreground">{p.artist}</span>
</figcaption>
</figure>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>Props
| Component | Notable props |
|---|---|
| ScrollArea | Forwards all Radix ScrollArea.Root props. Owns the viewport + vertical ScrollBar. |
| ScrollBar | orientation: "vertical" | "horizontal". Default "vertical". Render a horizontal bar as a child of ScrollArea to opt in. |
Source
packages/react/src/components/scroll-area.tsx · Figma node 2819:29663