ScrollArea · Tinyrack Design System

Contract

This Tinyrack wrapper preserves Base UI behavior, React 19 refs, native scrolling, and the render contract. Playground controls cover vertical, horizontal, and two-axis content.

Install

pnpm add @tinyrack/ui

Scroll inside the code area to read long lines.

Styles

@import '@tinyrack/ui/components/scroll-area.css';

Scroll inside the code area to read long lines.

Imports

import { TRScrollArea } from '@tinyrack/ui/components/scroll-area';

Scroll inside the code area to read long lines.

Playground

Rack event log 1

Rack event log 2

Rack event log 3

Rack event log 4

Rack event log 5

Rack event log 6

Rack event log 7

Rack event log 8

Rack event log 9

Rack event log 10

Rack event log 11

Rack event log 12

Usage

Vertical event log permalink

Rack event log 1

Rack event log 2

Rack event log 3

Rack event log 4

Rack event log 5

Rack event log 6

Rack event log 7

Rack event log 8

Rack event log 9

Rack event log 10

Rack event log 11

Rack event log 12

Examples

Two-axis overflow permalink

Render one scrollbar for each overflowing axis and include Corner where the tracks meet.

Rack event log 1

Rack event log 2

Rack event log 3

Rack event log 4

Rack event log 5

Rack event log 6

Rack event log 7

Rack event log 8

Rack event log 9

Rack event log 10

Rack event log 11

Rack event log 12

Horizontal overflow permalink

Render only the horizontal track when content overflows on the inline axis. Native touch, trackpad, wheel, and keyboard scrolling remain available on Viewport.

Deployment stage 1

Deployment stage 2

Deployment stage 3

Auto-hiding scrollbar permalink

Set autoHide to hide idle tracks. Hover, scroll, or focus the viewport to reveal them. Reduced-motion preferences remove the opacity transition.

Hover or focus this event log 1

Hover or focus this event log 2

Hover or focus this event log 3

Hover or focus this event log 4

Hover or focus this event log 5

Hover or focus this event log 6

Hover or focus this event log 7

Hover or focus this event log 8

Hover or focus this event log 9

Hover or focus this event log 10

Hover or focus this event log 11

Hover or focus this event log 12

Right-to-left scrolling permalink

Keep the DOM direction and DirectionProvider synchronized so horizontal wheel, track, thumb, and overflow-edge behavior use RTL coordinates.

سجل الخادم 1

سجل الخادم 2

سجل الخادم 3

Anatomy

Root owns measurement, overflow-edge state, the surface or plain variant, and optional autoHide styling.
Viewport is the native scroll container and receives the accessible name, keyboard focus, wheel, touch, and trackpad input.
Content wraps the layout whose dimensions create vertical, horizontal, or two-axis overflow.
Scrollbar renders one vertical or horizontal track and can remain mounted with keepMounted.
Thumb is the draggable position indicator inside its Scrollbar.
Corner fills the intersection when both scrollbars are present and overflowing.

API

Part	Props and state	Notes
`Root`	`TRScrollAreaRootProps`, `variant`, `autoHide`, `overflowEdgeThreshold`, `render`, `ref`	Defaults to the `surface` variant. `plain` removes the surface border and content padding.
`Viewport`	`TRScrollAreaViewportProps`, `TRScrollAreaViewportState`, `render`, `ref`	Native scroll container. Base UI adds focusability only while an axis overflows.
`Content`	`TRScrollAreaContentProps`, `TRScrollAreaContentState`, `render`, `ref`	Preserve intrinsic width to enable horizontal overflow.
`Scrollbar`	`TRScrollAreaScrollbarProps`, `TRScrollAreaScrollbarState`, `orientation`, `keepMounted`, `render`, `ref`	`orientation` defaults to `vertical`. Track wheel input scrolls the matching viewport axis.
`Thumb`	`TRScrollAreaThumbProps`, `TRScrollAreaThumbState`, `render`, `ref`	Dragging updates native viewport scroll position.
`Corner`	`TRScrollAreaCornerProps`, `TRScrollAreaCornerState`, `render`, `ref`	Mounts only while both axes overflow.

Overflow is reflected with data-overflow-x-start, data-overflow-x-end, data-overflow-y-start, and data-overflow-y-end; scrolling and track hover use data-scrolling and data-hovering. Customize the surface with --tr-scroll-area-background and --tr-scroll-area-color, the track with --tr-scroll-area-track-background, and the thumb with --tr-scroll-area-indicator-background. All parts preserve consumer classes, styles, native props, and React 19 refs.