Stepper
A numbered journey with a clear present step.
Live — this one is real
- Choose the package
- Check the details
- Publish when ready
Usage
import { useState } from "react";
import { Stepper } from "mizu-ui";
export function Example() {
const [step, setStep] = useState("review");
return (
<Stepper
current={step}
onStepChange={setStep}
steps={[
{ id: "prepare", label: "Prepare", description: "Choose the package" },
{ id: "review", label: "Review", description: "Check the details" },
{ id: "release", label: "Release", description: "Publish when ready" },
]}
/>
);
}
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 navigation/Navigation.tsx
Source is included in the npm package under src/navigation/Navigation.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | {id,label,description?,disabled?}[] | — | Ordered steps. |
| current | string | — | Current step id. |
| onStepChange | function | — | Optional navigation; omit for a static indicator. |
Accessibility
Ordered list with aria-current step. Buttons are optional; progression rules belong to the caller.
Motion
CSS transitions explain state changes. Reduced motion removes travel.