Step Flow
A multi-step panel: dots fill and check as you go, content slides toward where you are heading, and the height eases to fit. For a progress indicator only, use Stepper.
import { StepFlow } from "pleate/effects/step-flow";Workspace setup
Welcome
Three quick steps to set up your workspace.
Props
- children
One child per step.
ReactNode- titles
Step names for the dots.
string[]- initialStep
Start step.
numberdefault 0- onStepChange / onComplete
Callbacks.
functions- backLabel / nextLabel / completeLabel
Button text.
stringdefault Back / Continue / Finish- done
Shown after the last step.
ReactNode
Accessibility
- Dots are buttons with aria-current="step"; finished steps can be revisited.
- Reduced motion swaps steps without sliding.