Stepper

A multi-step form component with a progress indicator.

Pumki UI

Welcome to the Pumki's React Bits inspired stepper!

Check out the next step!

import Stepper, { Step } from '@/components/pumki-ui/stepper.tsx';

<Stepper />

Prop	Type	Default	Description
children	React.ReactNode	required	Step content. Each child is a step.
initialStep	number	1	Initial step index (1-based).
onStepChange	(step: number) => void	() =>	Callback when the step changes.
onFinalStepCompleted	() => void	() =>	Callback when the last step is completed.
stepCircleContainerClassName	string	""	Custom class for the step indicator container.
stepContainerClassName	string	""	Custom class for the step indicator row.
contentClassName	string	""	Custom class for the step content area.
footerClassName	string	""	Custom class for the footer area.
backButtonProps	`React.ButtonHTMLAttributes<HTMLButtonElement>`		Props for the back button.
nextButtonProps	`React.ButtonHTMLAttributes<HTMLButtonElement>`		Props for the next/complete button.
backButtonText	string	”Back”	Text for the back button.
nextButtonText	string	”Continue”	Text for the next button.
disableStepIndicators	boolean	false	If true, disables clicking step indicators.
renderStepIndicator	`(props: { step: number; currentStep: number; onStepClick: (clicked: number) => void; })` => React.ReactNode	undefined	Custom render function for step indicators.