Components
Stepper
SketchStepper — a hand-drawn step progress indicator with labelled nodes and connectors.
SketchStepper draws a rough.js step indicator — numbered or dot nodes connected by
sketched lines, with labels and optional sublabels beneath each step. It supports
horizontal and vertical layouts and is fluid in the horizontal orientation, so wrap
it to size it.
Default
import { SketchStepper } from "blackchalk";const steps = [{ label: "Cart", sublabel: "Review items" },{ label: "Shipping", sublabel: "Enter address" },{ label: "Payment", sublabel: "Add card" },{ label: "Confirm", sublabel: "Place order" },];<div style={{ width: 520, maxWidth: "100%" }}><SketchStepper steps={steps} currentStep={1} /></div>Vertical
<SketchSteppersteps={steps}currentStep={2}orientation="vertical"/>Props
| Prop | Type | Default |
|---|---|---|
steps | { label: string; sublabel?: string }[] | — |
currentStep | number | 0 |
orientation | "horizontal" | "vertical" | "horizontal" |
nodeContent | "number" | "dot" | "number" |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.