Interaction / component

Stepper

A responsive step-by-step flow with animated indicators, measured panels and keyboard navigation.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

Import Stepper and the named Step export from Stepper.tsx. Replace the three sample children with your own content. Demo.tsx contains the complete gallery composition.
Back navigation preserves input state: inactive panels remain mounted, inert and hidden from assistive technology. Pause any child-owned work using the selected step.
Native buttons support keyboard input and move focus to the selected panel. Paused or reduced-motion navigation remains functional and settles immediately. Hidden and offscreen animation time is excluded.
Content slides, measured height springs, the check path and purple connector timing follow the source. The outer wrapper fits its embedding container. Completion does not submit forms; handle it in your own callback.
initialStep sets the initial uncontrolled selection; change replayToken to restart. The gallery remounts when its Starting step control changes.

React 19.2ResizeObserver

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Props

Prop	Type	Default	Description
`initialStep`	number	`1`	Starting step
`backButtonText`	string	`"Back"`	Back label
`nextButtonText`	string	`"Continue"`	Next label
`disableStepIndicators`	boolean	`false`	Lock indicator navigation
`children`	ReactNode	`three example steps`	Each child is one step. Import the named Step export for source padding; inactive children retain state.
`currentStep`	number \| undefined	`undefined`	Controlled 1-based step. count + 1 is completed. Omit for internal state.
`onStepChange`	(step: number) => void	`undefined`	Called for navigation to an available step.
`onFinalStepCompleted`	() => void	`undefined`	Called when the final step completes.
`completionContent`	ReactNode	`undefined`	Optional content displayed after completion.
`backButtonProps`	ButtonHTMLAttributes<HTMLButtonElement>	`{}`	Button props; preventDefault in onClick cancels navigation.
`nextButtonProps`	ButtonHTMLAttributes<HTMLButtonElement>	`{}`	Button props; preventDefault in onClick cancels navigation.
`renderStepIndicator`	(props: RenderStepIndicatorProps) => ReactNode	`undefined`	Custom indicator receives step, currentStep and guarded onStepClick.
`stepCircleContainerClassName`	string	`''`	Additional classes for the corresponding surface.
`stepContainerClassName`	string	`''`	Additional classes for the corresponding surface.
`contentClassName`	string	`''`	Additional classes for the corresponding surface.
`footerClassName`	string	`''`	Additional classes for the corresponding surface.
`paused`	boolean	`false`	Freeze decorative motion.
`replayToken`	number	`0`	Change to reset.
`className`	string	`''`	Additional outer classes.