Skip to content
MIZU.

ScrollArea

A bounded reading region that keyboard users can enter and scroll.

Live — this one is real

Entry 1. Each component keeps its own behavior, source and usage example available.

Entry 2. Each component keeps its own behavior, source and usage example available.

Entry 3. Each component keeps its own behavior, source and usage example available.

Entry 4. Each component keeps its own behavior, source and usage example available.

Entry 5. Each component keeps its own behavior, source and usage example available.

Entry 6. Each component keeps its own behavior, source and usage example available.

Entry 7. Each component keeps its own behavior, source and usage example available.

Entry 8. Each component keeps its own behavior, source and usage example available.

Usage

import { ScrollArea, Prose } from "mizu-ui";

export function Example() {
  return (
    <ScrollArea label="Release notes" maxHeight={180}>
      <Prose>
        {Array.from({ length: 8 }, (_, i) => (
          <p key={i}>
            Entry {i + 1}. Each component keeps its own behavior, source and
            usage example available.
          </p>
        ))}
      </Prose>
    </ScrollArea>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect layout/Layout.tsx

Source is included in the npm package under src/layout/Layout.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Region name.
maxHeightnumber | string300Height limit.
...propsHTMLAttributes—Native div attributes.

Accessibility

Named region is keyboard-focusable. Native scrolling, overscroll containment and platform scrollbars.

Motion

Native scroll; no smoothing loop.

Works alongside

StackGridSplitPaneAspectRatio