Step 01
Webhook received from billing service
Layout
Themeable scroll containers for dense interfaces
ScrollArea wraps overflowing content in a consistent, token-driven container. Use it for activity feeds, command panels, metric rails, compact tables, and any section where browser default scrollbars feel too heavy or inconsistent.
Examples
ScrollArea standardizes overflow panels, horizontal rails, hidden scrollbars, and hover-revealed thumbs without adding a JavaScript positioning dependency.
Scroll area variants examples
Use Show output / Show code on each row. Snippets start with a Variant line naming the axis and token.
Appearance: DEFAULT | Orientation: VERTICAL
Appearance: MUTED | Orientation: VERTICAL
Appearance: OUTLINE | Orientation: VERTICAL
Appearance: GLASS | Orientation: VERTICAL
Appearance: SKY | Orientation: VERTICAL
Appearance: EMERALD | Orientation: VERTICAL
Appearance: ROSE | Orientation: VERTICAL
Appearance: AMBER | Orientation: VERTICAL
Appearance: VIOLET | Orientation: VERTICAL
Appearance: OUTLINE | Size: SM
Appearance: OUTLINE | Size: MD
Appearance: OUTLINE | Size: LG
Orientation: VERTICAL | Appearance: SKY
Orientation: HORIZONTAL | Appearance: SKY
Orientation: BOTH | Appearance: SKY
Scrollbar: AUTO | Appearance: GLASS
Scrollbar: HOVER | Appearance: GLASS
Scrollbar: ALWAYS | Appearance: GLASS
Scrollbar: HIDDEN | Appearance: GLASS
CSS variable overrides
22 variablesScrollArea CSS variables
Override these ScrollArea variables on :root, a theme selector, or a component wrapper.
Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?
:root {
--zui-scroll-area-thumb: #94a3b8;
--zui-scroll-area-thumb-border: #f8fafc;
--zui-scroll-area-track: #e2e8f0;
--zui-scroll-area-size: 0.625rem;
--zui-scroll-area-ring-focus: oklch(54.6% 0.245 262.881 / 0.28);
--zui-scroll-area-ring-offset-focus: #ffffff;
--zui-scroll-area-outline-border: #cbd5e1;
--zui-scroll-area-glass-border: #ffffff80;
--zui-scroll-area-glass-bg: #ffffff99;
--zui-scroll-area-sky-border: oklch(62.3% 0.214 259.815 / 0.35);
--zui-scroll-area-emerald-border: oklch(59.6% 0.145 163.225 / 0.35);
--zui-scroll-area-rose-border: oklch(58.6% 0.253 17.585 / 0.3);
--zui-scroll-area-amber-border: oklch(76.9% 0.188 70.08 / 0.35);
--zui-scroll-area-violet-border: oklch(60.6% 0.25 292.717 / 0.35);
}
/* Dark theme variables follow the same names with -dark appended. */
.dark {
--zui-scroll-area-thumb-dark: #64748b;
--zui-scroll-area-thumb-border-dark: #020617;
/* ...same variables with -dark at the end */
}What it does
ScrollArea gives overflowing content a consistent scrollbar treatment across product surfaces.
It supports vertical, horizontal, and two-axis scrolling, plus auto, hover, always, and hidden scrollbar visibility modes.
Composition and API
Use ScrollArea as a single wrapper around content. Pass className for the scroll container size and padding, viewportClassName for inner layout, and variants such as appearance, size, orientation, scrollbar, and shadow.
Common use cases
Use ScrollArea to standardize scrollbar appearance across different browsers and platforms. It is ideal for sidebar navigation, dropdown menus, chat feeds, log viewers, and horizontal card carousels where native scrollbars would look inconsistent or bulky.
Accessibility
Use aria-label when the scrollable region has standalone meaning. The component maps named regions to role=region and tabIndex=0 unless you provide your own role or tabIndex.
Next.js integration notes
ScrollArea ships as a client-safe package entry because it owns interactive focus attributes, but it has no effects or runtime layout work. You can render it inside App Router preview pages while keeping SEO content server-rendered.
FAQ
Does ScrollArea require JavaScript for positioning?
No. ScrollArea uses CSS overflow, CSS custom properties, and browser scrollbar styling, so it does not need a layout or positioning dependency.
Can ScrollArea scroll horizontally?
Yes. Set orientation to horizontal and give the viewport content a minimum width, such as min-w-max or a fixed grid width.
How do I make a ScrollArea accessible?
Provide aria-label or role and label content when the scroll region is meaningful on its own. Named regions become keyboard-focusable by default so users can scroll them with the keyboard.