Scroll Area

One native overflow container with explicit axis, size, focus, and decorative edge choices.

When to use it. Use it when its native document or form semantics match the caller-owned requirement.

Native baseline Exact fallback

Scroll Area primary example

Activity row 1: long caller-owned content remains reachable.

Activity row 2: long caller-owned content remains reachable.

Activity row 3: long caller-owned content remains reachable.

Activity row 4: long caller-owned content remains reachable.

Activity row 5: long caller-owned content remains reachable.

Activity row 6: long caller-owned content remains reachable.

Activity row 7: long caller-owned content remains reachable.

Activity row 8: long caller-owned content remains reachable.

Activity row 9: long caller-owned content remains reachable.

Activity row 10: long caller-owned content remains reachable.

Activity row 11: long caller-owned content remains reachable.

Activity row 12: long caller-owned content remains reachable.

Wide native overflow destination.

<.scroll_area focusable accessible_label="Activity">Long caller content.</.scroll_area>

How it works

<.scroll_area> Native scrolling is authoritative. The application owns dimensions, restoration, loading, and virtualization; edge cues disappear safely.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :scroll_area does not ship them.
application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Native elements, names, relationships, focus, and keyboard behavior remain authoritative.

Scroll Area support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.

Application ownership and API

Native scrolling is authoritative. The application owns dimensions, restoration, loading, and virtualization; edge cues disappear safely.

Public API Package source

Provenance

Catalogue identity content.scroll_area, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt the overflow presentation into one native HEEX scroll container with closed axes and sizes, explicit named focus policy, and capability-gated decorative edge masks without custom controls or scroll state.