Scroll Area

Free + Pro

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.

Unlock Advanced Scroll Area Features

Get access to powerful pro features that enhance your scroll area component with advanced capabilities, premium styling options, and optimized performance.

ScrollArea and ScrollBar exported directly from @moontra/moonui-pro
Identical props and behavior across free and Pro packages
Ready-made composition with Pro Popover, Command, and Dialog surfaces

Pro Features

Unlock advanced capabilities with the Pro version

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-area

Usage

Basic Usage

Pro Required

Versions

v1.40.0

v1.39.0

v1.38.0

v1.37.0

v1.36.0

v1.35.0

v1.34.0

v1.33.0

v1.32.0

v1.31.0

v1.30.0

v1.29.0

v1.28.0

v1.27.0

v1.26.0

v1.25.0

v1.24.0

v1.23.0

v1.22.0

v1.21.0

v1.20.0

v1.19.0

v1.18.0

v1.17.0

v1.16.0

v1.15.0

v1.14.0

v1.13.0

v1.12.0

v1.11.0

v1.10.0

v1.9.0

v1.8.0

v1.7.0

v1.6.0

v1.5.0

v1.4.0

v1.3.0

v1.2.0

v1.1.0

Pro Usage

PRO

Pro Required

Team Activity

Sarah Connor deployed docs-site to production

2 min ago

Kyle Reese merged PR #482: token cleanup

14 min ago

Ellen Ripley commented on issue #91

32 min ago

John Wick opened PR #483: scroll fixes

1 hour ago

Trinity Moss approved PR #481: dark mode audit

2 hours ago

Sarah Connor tagged release v2.5.1

3 hours ago

Kyle Reese closed issue #88 as completed

5 hours ago

Ellen Ripley assigned issue #90 to John

6 hours ago

John Wick pushed 3 commits to main

8 hours ago

Trinity Moss created branch feat/virtual-list

9 hours ago

Examples

Vertical List

The default vertical scroll area with a themed scrollbar that appears on hover.

Versions

v1.40.0

v1.39.0

v1.38.0

v1.37.0

v1.36.0

v1.35.0

v1.34.0

v1.33.0

v1.32.0

v1.31.0

v1.30.0

v1.29.0

v1.28.0

v1.27.0

v1.26.0

v1.25.0

v1.24.0

v1.23.0

v1.22.0

v1.21.0

v1.20.0

v1.19.0

v1.18.0

v1.17.0

v1.16.0

v1.15.0

v1.14.0

v1.13.0

v1.12.0

v1.11.0

v1.10.0

v1.9.0

v1.8.0

v1.7.0

v1.6.0

v1.5.0

v1.4.0

v1.3.0

v1.2.0

v1.1.0

Horizontal Scrolling

Add a ScrollBar with orientation set to horizontal to scroll wide content sideways.

Slate

Red

Orange

Amber

Emerald

Teal

Sky

Indigo

Violet

Rose

Scrollbar Visibility

Control when the scrollbar is shown with the type prop: hover (default), always, scroll, or auto.

Default (hover)

v2.5.1 Fixed theme export missing the use client directive.

v2.5.0 Added subpath exports for theme and tailwind preset.

v2.4.2 Improved dark mode contrast for muted surfaces.

v2.4.1 Patched focus ring offset on compact buttons.

v2.4.0 Introduced new spacing scale tokens.

v2.3.3 Resolved scrollbar overlap in nested layouts.

v2.3.2 Updated peer dependency ranges for React 18.

v2.3.1 Reduced bundle size of the icon re-exports.

v2.3.0 Shipped RTL support across overlay components.

v2.2.0 Added keyboard shortcuts to command surfaces.

Always visible

v2.5.1 Fixed theme export missing the use client directive.

v2.5.0 Added subpath exports for theme and tailwind preset.

v2.4.2 Improved dark mode contrast for muted surfaces.

v2.4.1 Patched focus ring offset on compact buttons.

v2.4.0 Introduced new spacing scale tokens.

v2.3.3 Resolved scrollbar overlap in nested layouts.

v2.3.2 Updated peer dependency ranges for React 18.

v2.3.1 Reduced bundle size of the icon re-exports.

v2.3.0 Shipped RTL support across overlay components.

v2.2.0 Added keyboard shortcuts to command surfaces.

Scroll Hide Delay

With type set to scroll, the scrollbar shows while scrolling and hides after the scrollHideDelay in milliseconds.

Changelog

v2.5.1

Fixed theme export missing the use client directive.

v2.5.0

Added subpath exports for theme and tailwind preset.

v2.4.2

Improved dark mode contrast for muted surfaces.

v2.4.1

Patched focus ring offset on compact buttons.

v2.4.0

Introduced new spacing scale tokens.

v2.3.3

Resolved scrollbar overlap in nested layouts.

v2.3.2

Updated peer dependency ranges for React 18.

v2.3.1

Reduced bundle size of the icon re-exports.

v2.3.0

Shipped RTL support across overlay components.

v2.2.0

Added keyboard shortcuts to command surfaces.

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).

focusable (default) — text content

v2.5.1 Fixed theme export missing the use client directive.

v2.5.0 Added subpath exports for theme and tailwind preset.

v2.4.2 Improved dark mode contrast for muted surfaces.

v2.4.1 Patched focus ring offset on compact buttons.

v2.4.0 Introduced new spacing scale tokens.

v2.3.3 Resolved scrollbar overlap in nested layouts.

v2.3.2 Updated peer dependency ranges for React 18.

v2.3.1 Reduced bundle size of the icon re-exports.

v2.3.0 Shipped RTL support across overlay components.

v2.2.0 Added keyboard shortcuts to command surfaces.

focusable={false} — focusable content

PRO

Pro Examples

Pro Package Activity Feed

PRO

ScrollArea is also exported from the Pro package with the identical API, keeping pro-only projects on a single dependency.

Pro Required

Team Activity

Sarah Connor deployed docs-site to production

2 min ago

Kyle Reese merged PR #482: token cleanup

14 min ago

Ellen Ripley commented on issue #91

32 min ago

John Wick opened PR #483: scroll fixes

1 hour ago

Trinity Moss approved PR #481: dark mode audit

2 hours ago

Sarah Connor tagged release v2.5.1

3 hours ago

Kyle Reese closed issue #88 as completed

5 hours ago

Ellen Ripley assigned issue #90 to John

6 hours ago

John Wick pushed 3 commits to main

8 hours ago

Trinity Moss created branch feat/virtual-list

9 hours ago

Composition with Pro Overlays

PRO

Combine ScrollArea with Pro overlay surfaces such as the Pro Popover to build scrollable dropdown panels.

Pro Required