Stepper
Numbered sketch circles joined by hand-drawn connectors. Completed steps fill in; the current step keeps a heavier ring.
✓
Details
2
Sketch
3
Publish
<Stepper
steps={["Details", "Sketch", "Publish"]}
current={1}
roughness={1.5}
/>CLI install
npx doodleui-react add stepper
Usage
import { Stepper } from "doodleui-react";
<Stepper
steps={["Details", "Sketch", "Publish"]}
current={1}
/>
The active step sets aria-current="step". A complement to Progress for multi-step flows.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| steps | Array<StepperStep | ReactNode> | required | Labels, or { label, description } objects. |
| current | number | 0 | 0-based active step. Earlier steps fill in. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout axis for markers and connectors. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |