Stepper

A representation of a user’s progress through a series of discrete steps.

Examples

Define custom animations for the stepper, using the animation, animationViewChange props:

Learn more about how to customize the animations in the Custom Animations section.

This component is used in the following Blocks:

This component uses the following default theme:

Learn more about how to customize in the Theme documentation.

Name	Type	Default
`className`	`string` CSS Classname to applied to the Stepper
`activeStep`	`number` Currently active step	`0`
`theme`	`StepperTheme` Theme for the Stepper.
`variant`	`"default" \| "numbered"` Style of the stepper. Default is dots but it can be numbered too.	`'default'`
`continuous`	`boolean` Display link after last step
`animated`	`boolean` Deprecated: Use animation configuration instead. Animate items appearance
`animation`	`MotionNodeAnimationOptions` Animation configuration for the Stepper.

Name	Type	Default
`label`	`string` Optional Text of the marker
`className`	`string` CSS Classname to applied to the Step