ScrollArea

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

View .md

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

tsx

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

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

npx shadcn@latest add 0xuser64bit/mizu/scroll-area 0xuser64bit/mizu/prose

The example also uses Prose, so the command adds it too.

Every component imports from its own path, its name in kebab case. Its source, layout/Layout.tsx, also holds Stack, Grid, AspectRatio and AppShell. Each has its own command and path; adding one after this copies only its small entry file. To paste the example, replace its mizu-ui import with:

tsx

import { ScrollArea } from "@/components/ui/mizu/scroll-area";
import { Prose } from "@/components/ui/mizu/prose";

For npm imports, 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. A Server Component: it renders on the server, with no client JavaScript of its own.

Inspect layout/Layout.tsx

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

Open full source ↗

Props

Prop	Type	Default	Description
label	string	—	Region name.
maxHeight	number \| string	300	Height limit.
...props	HTMLAttributes	—	Native div attributes.

Accessibility

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

Motion

Native scroll; no smoothing loop.

Works alongside

Stack Grid SplitPane Dock