Skip to content
MIZU.

ScrollProgress

A thin reading indicator driven by real document scroll progress.

View .md

Live — this one is real

0%

Scroll this document. The line measures the available document scroll, including the API below.

Usage

tsx
import { ScrollProgress, Stack } from "mizu-ui";

export function Example() {
  return (
    <Stack gap={20}>
      <ScrollProgress label="Documentation reading progress" />
      <p className="mizu-field-hint">
        Scroll this document. The line measures the available document scroll,
        including the API below.
      </p>
    </Stack>
  );
}

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.

sh
npx shadcn@latest add 0xuser64bit/mizu/scroll-progress 0xuser64bit/mizu/stack

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

Every component imports from its own path, its name in kebab case. Its source, motion/Scroll.tsx, also holds Parallax. 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 { ScrollProgress } from "@/components/ui/mizu/scroll-progress";
import { Stack } from "@/components/ui/mizu/stack";

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. Requires React and Motion. A Client Component: its source starts with “use client”.

Inspect motion/Scroll.tsx

Source is included in the npm package under src/motion/Scroll.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring"Reading progress"Accessible progress name.
classNamestring—Optional placement and styling.

Accessibility

Named progressbar exposes a bounded 0–100 value. No fabricated reading time or completion state.

Motion

A managed Motion scroll value updates the line directly; the announced percentage updates only on integer changes.

Works alongside

MaskLineRevealMagneticMarquee