StepProgress
A progress bar with steps for React. Controlled via value.
Basic
Pass an ordered list of labels and the current step index.
<StepProgress steps={["Create", "Configure", "Review", "Launch"]} value={1} />
Value
The current step index (0-based). Fill width follows a front-loaded curve so early steps already read as progress.
<StepProgress steps={["Create", "Configure", "Review", "Launch"]} value={2} />
Size
Three sizes for different layouts.
<StepProgress steps={steps} value={1} size="md" />
Labels
Step labels are on by default. Hide them for a compact bar.
<StepProgress steps={steps} value={1} />Shimmer
Soft sweep on the fill while progress remains. Always off on the final step. Control the sweep direction with shimmerAngle.
<StepProgress steps={steps} value={1} />Gradient
Override the fill with gradientColors and gradientAngle. Colors are spaced evenly unless you pass stops with positions.
<StepProgress steps={steps} value={1} />Shimmer band
Control leading / highlight / trailing widths. Pass shimmerBands for a different band on each segment.
<StepProgress steps={steps} value={1} />Statuses
Override node icons with statuses. Fill still follows value.
<StepProgress steps={steps} value={0} statuses={["upcoming","upcoming","upcoming","upcoming"]} progressStops={[0, 36, 54, 100]} />
Interactive Steps
Pass onStepClick to turn step markers into accessible buttons with keyboard navigation (Enter / Space).
<StepProgress
steps={steps}
value={1}
onStepClick={(index) => setStep(index)}
/>useStepProgress Hook
Manage stepper state effortlessly with the built-in React hook.
const { props, next, prev, isFirst, isLast } = useStepProgress({ steps: ['Create', 'Configure', 'Review', 'Launch'], initialStep: 1, }) return ( <> <StepProgress {...props} /> <button onClick={prev} disabled={isFirst}>Back</button> <button onClick={next} disabled={isLast}>Next</button> </> )
Custom Icons
Override complete and ongoing icons using the icons slot prop.
<StepProgress steps={steps} value={2} icons={{ complete: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>, ongoing: <span style={{ fontSize: "11px", fontWeight: "bold" }}>●</span>, }} />
API Reference
Minimal surface. Good defaults. Override only when you need to.