Process Stepper

A wizard-style stepper component for breaking down complex forms and processes into manageable chunks. Features smooth, dynamic height transitions and animated progress indicators.

Live Preview

Welcome to Modus UI

Let's get your workspace set up. This stepper component allows you to break down complex forms into easily digestible chunks.

Installation

CLI

npx @modus-ui/cli add process-stepper

Manual

Copy the code from the component tab.
Create a file at components/ui/process-stepper.tsx.
Paste the code.

Usage

tsx

import { ProcessStepper, Step } from "@/components/ui/process-stepper";

export default function Example() {
  return (
    <ProcessStepper>
      <Step>
        <h3>Step 1</h3>
        <p>This is the first step.</p>
      </Step>
      <Step>
        <h3>Step 2</h3>
        <p>This is the second step.</p>
      </Step>
      <Step>
        <h3>Step 3</h3>
        <p>This is the final step.</p>
      </Step>
    </ProcessStepper>
  );
}

Props

Prop	Type	Default	Description
`initialStep`	`number`	`1`	The step to start on.
`onStepChange`	`(step: number) => void`	-	Callback fired when the step changes.
`onFinalStepCompleted`	`() => void`	-	Callback fired when the user completes the last step.
`backButtonText`	`string`	`"Back"`	Text for the back button.
`nextButtonText`	`string`	`"Continue"`	Text for the next button.
`disableStepIndicators`	`boolean`	`false`	If true, clicking step indicators won't navigate.