# ScrollArea

> Scrolls one axis with soft edge fades instead of a heavy scrollbar.

- **Level**: molecule · **Status**: stable · **Role**: surface
- **Import**: `import { ScrollArea } from "@rrios-forge/ui/molecules/scroll-area";`
- **Source**: `packages/ui/src/molecules/scroll-area`

A region that scrolls on one axis without a heavy scrollbar (ADR-039). Its edges fade only where content continues, so the reader sees there is more without a grey bar; a vertical wheel moves a horizontal strip. Name it (`aria-label`) and it becomes a keyboard stop when it overflows.

## Use it for

- Content that overflows one axis (a strip of options, a long list in a pane) → `ScrollArea` (edge fades, no heavy scrollbar)

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `horizontal` `vertical` | `vertical` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |

## Stories

- [Horizontal](/?path=/story/components-molecules-scrollarea--horizontal) · frame: `/iframe.html?id=components-molecules-scrollarea--horizontal&viewMode=story`
- [Vertical](/?path=/story/components-molecules-scrollarea--vertical) · frame: `/iframe.html?id=components-molecules-scrollarea--vertical&viewMode=story`
- [No Overflow](/?path=/story/components-molecules-scrollarea--no-overflow) · frame: `/iframe.html?id=components-molecules-scrollarea--no-overflow&viewMode=story`

## Decisions that name it

- ADR-039 — The component premium pass: translucent fills, a selected register, quiet scroll, and a system-wide audit

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).