Stepper

Variable: Stepper

const Stepper: React.FunctionComponent<IStepper>;

Renders an elegant horizontal status flow indicator with animated progress.

Features a modern glass morphism design with smooth transitions between states. Each step shows its status through visual indicators: checkmarks for completed, a pulsing indicator for active, and muted styling for upcoming steps.

Example

<Stepper
  steps={[
    { stepName: 'Draft' },
    { stepName: 'Submitted' },
    { stepName: 'Approved' },
    { stepName: 'Completed' },
  ]}
  currentStep="Approved"
  onStepClick={(stepName) => console.log(stepName)}
  classNames={{ root: 'flow-root', status: 'current-status' }}
/>

Variable: Stepper

Example​

Example