Stepper

Animated multi-step progress indicator with active state transitions

Basic Usage

Account DetailsEnter your name and email address to create your account.

pnpm add @corew500/ui

import { Stepper } from "@corew500/ui/stepper"

<Stepper>Content</Stepper>

Axis	Values	Default
`size`	smdefaultlg	default

Prop	Type	Default	Description
`initialStep`	number	`1`	Initial step number (1-indexed)
`onStepChange`	(step: number) => void	—	Callback when step changes
`onFinalStepCompleted`	() => void	—	Callback when final step is completed
`disableStepIndicators`	enum	`false`	Disable clicking on step indicators to navigate
`backButtonText`	string	`Back`	Back button text
`nextButtonText`	string	`Continue`	Next button text
`completeButtonText`	string	`Complete`	Complete button text (last step)
`renderStepIndicator`	(props: { step: number; currentStep: number; onStepClick: (step: number) => void; }) => ReactNode	—	Custom step indicator renderer
`size`	enum	—	—