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.