Scroll Area
Custom scrollable container with styled scrollbars
The scroll area is a container with custom-styled scrollbars and optional edge fades. Use it for any overflowing region, like a sidebar, a chat log, or a long form, where the native scrollbar would look out of place.
Preview
Installation
Usage
Examples
Fade Edges
Use fadeEdges to add a CSS-mask fade at the edges that appears only where content is scrollable.
The fade depth defaults to min(12%, 2.5rem), 12% of the container capped at 2.5rem so tall scrollers stay subtle. Tune it per instance by setting the --scroll-fade-size CSS variable on viewportClassName:
With nativeScroll, the fade eases in and out over a fixed scroll distance (6rem by default, clamped to the scroll range so short scrollers still fully reveal). Adjust it with --scroll-fade-reveal:
Native Scroll Fade
Add nativeScroll to drive the fade with CSS scroll-driven animations instead of Base UI's measured overflow, falling back to a static fade where unsupported.
Scroll Fade Without the Component
The same edge fade ships as a standalone CSS utility you can drop on any element with overflow, for scroll containers you didn't render with ScrollArea such as a code block, a table wrapper, or a third-party list. See Scroll Fade.
Scrollbar Gutter
Use scrollbarGutter to reserve space for the scrollbar so it doesn't shift the layout when it appears.
Without gutter
With gutter
Persistent Scrollbar
Use persistScrollbar to always show the scrollbar instead of fading it in on hover or scroll.
Horizontal Scroll
Let wide content scroll sideways instead of wrapping.
Both Scrollbars
When content overflows in both directions, both scrollbars appear automatically and the corner keeps them from intersecting.
API Reference
The ScrollArea component is built on top of Base UI's ScrollArea. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.
For the complete Base UI API, see the Base UI ScrollArea documentation.
Props
ScrollArea
Container with styled scrollbars and optional fade effects. Wraps Base UI's ScrollArea.Root.