Layout

Scroll Area

Native-feel scroll container with custom scrollbars, edge fading, and overscroll containment.

idle

Usage

import { ScrollArea } from "@mizen-labs/ui";

Recent operations stay in one bounded view.

Compare nodes without losing the table columns.

Review deployments across environments and regions.

Short content lets the page keep scrolling.

The same activity view, with right-to-left reading order.

Guidance	Practice
Do	Keep scroll regions bounded and their content reachable by keyboard. Preserve visible context around wide content.
Do	Constrain the parent height when content must scroll.

Guidance	Boundary
Scope	Use TableContainer for tables and CodeBlockContent for code. Avoid nested scrolling without a clear task reason.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`clampContentMinWidth`	`boolean`	`true`	Clamps content min-width to prevent intrinsic child overflow.
`fill`	`boolean`	`false`	Fills the full available height and width.
`overscrollContain`	`boolean`	`false`	Contains scroll chaining on overflowing axes.
`scrollFade`	`boolean`	`false`	Applies mask image fade on overflowing edges.
`scrollbarGutter`	`boolean`	`false`	Reserves scrollbar space when overflowing.
`overflowEdgeThreshold`	`number \| Partial<Record<'xStart' \| 'xEnd' \| 'yStart' \| 'yEnd', number>>`	`0`	Threshold before overflow edge attributes are applied.
`children`	`ReactNode`	`—`	Scrollable content rendered inside the viewport.
`ScrollAreaViewport`	`Component`	`—`	Styled Base UI viewport for custom compositions.
`ScrollAreaScrollbar`	`Component`	`—`	Styled scrollbar with an automatic thumb or caller-supplied children.
`ScrollAreaThumb`	`Component`	`—`	Styled draggable thumb for custom compositions.
`ScrollAreaCorner`	`Component`	`—`	Corner between horizontal and vertical scrollbars.
`ScrollAreaPrimitive`	`BaseScrollArea`	`—`	Base UI ScrollArea primitive parts.