Manzil

Installation

Usage

Drive the bar with a value from your own state, or pass onStepClick to enable interactive step navigation.

<StepProgress
  steps={["Create", "Configure", "Review", "Launch"]}
  value={1}
/>

Value

The current step index. 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. Tune the sweep with shimmerAngle.

<StepProgress steps={steps} value={1} />

Gradient

Override the fill with gradientColors and gradientAngle.

<StepProgress steps={steps} value={1} />

Shimmer band

Shape the stripe: leading → highlight → trailing. Use shimmerBands for different widths per step segment.

<StepProgress steps={steps} value={1} />

Statuses

Explicit per-step state. complete shows a check; ongoing and upcoming show the step number.

<StepProgress
  steps={steps}
  value={0}
  statuses={["upcoming","upcoming","upcoming","upcoming"]}
  progressStops={[0, 36, 54, 100]}
/>