Scroll Area

A native, dependency-free scroll container with polished scrollbar styling for dense dashboards and horizontal content lanes.

Preview & Interactive Laboratory

Vertical Incident Feed

Replication lag normalized

2m ago

Healthy

Tokyo edge cache warmed

7m ago

Updated

SOC review awaiting signoff

14m ago

Review

Invoice export batch complete

19m ago

Done

Sandbox credentials rotated

29m ago

Security

Warehouse sync resumed

42m ago

Healthy

BI snapshot delivered

1h ago

Done

Horizontal Release Lanes

Core Platform

Release lane

Schema updates queued

Security

Release lane

2 approvals required

Revenue Ops

Release lane

Forecast model recalculating

Lifecycle

Release lane

Email journeys refreshing

Usage & Implementation

<ScrollArea className="h-72 rounded-3xl border border-white/10 bg-background/40 p-4">
  <div className="space-y-3">...</div>
</ScrollArea>
React / Tailwind

Granular Customization

1

Container

Controls sizing, border treatment, and radius.

className={`className`}
2

Orientation

Switches overflow direction between vertical, horizontal, or both axes.

className={`orientation='horizontal'`}
3

Surface Variant

Adds outline or glass surface treatments.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
orientation'vertical' | 'horizontal' | 'both''vertical'Controls which axis is scrollable.
variant'default' | 'outline' | 'glass''default'Applies the base container surface styling.
classNamestring-Set height, width, padding, and shell appearance.