Scroll Area
Custom-styled, cross-browser scroll container built on Radix UI. Replaces native scrollbars with themeable ScrollBar components while preserving native scrolling behavior, keyboard support, and accessibility.
Pro features
What the Pro version adds to this component.
Single-Package Workflow
ScrollArea and ScrollBar also ship from @moontra/moonui-pro, so pro-only projects stay on one dependency
Pro Overlay Composition
Drop scrollable regions into Pro Popover, Command, and Dialog surfaces for inbox and palette patterns
Identical API Surface
The Pro export matches the free component prop for prop, so switching packages requires zero code changes
Consistent Theming
Both packages style the thumb and track with the same design tokens for a unified look in mixed codebases
Installation
Install via CLI
npx @moontra/moonui-cli add scroll-areaUsage
Basic Usage
Pro Usage
Examples
Vertical List
The default vertical scroll area with a themed scrollbar that appears on hover.
Horizontal Scrolling
Add a ScrollBar with orientation set to horizontal to scroll wide content sideways.
Scrollbar Visibility
Control when the scrollbar is shown with the type prop: hover (default), always, scroll, or auto.
Scroll Hide Delay
With type set to scroll, the scrollbar shows while scrolling and hides after the scrollHideDelay in milliseconds.
Keyboard Scrolling (focusable)
The viewport is a tab stop by default, so a text-only scroll area can be reached with Tab and scrolled with the arrow keys. Pass focusable={false} only when every item inside is already focusable — the buttons in the second area provide the keyboard access themselves, so the extra viewport stop would be redundant. Never combine focusable={false} with text-only content: that region becomes unreachable by keyboard (WCAG 2.1.1, axe scrollable-region-focusable).
Pro Package Activity Feed
ScrollArea is also exported from the Pro package with the identical API, keeping pro-only projects on a single dependency.
Composition with Pro Overlays
Combine ScrollArea with Pro overlay surfaces such as the Pro Popover to build scrollable dropdown panels.