ComponentsNew
Checked Stepper
Steps with circles that turn into checks and a progress bar. Step content slides in the direction you move: forward or back.
Customize
accentColor
secondaryColor
glowColor
Based on Checked Stepper (MIT license) · Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| steps | { label: string; content?: ReactNode }[] | — | Steps: label and content. |
| initialStep | number | 0 | Step to start from, counted from zero. |
| showProgress | boolean | true | Bar that fills up to the current step. |
| activeScale | number | 1.2 | How much the current step's circle is enlarged. |
| prevLabel | string | "Previous" | Back button text. |
| nextLabel | string | "Next" | Next button text. |
| onStepChange | (step: number) => void | — | Called with the new step number. |
| accentColor | string | "#ffffff" | Main colour: completed steps, the start of the bar and the Next button. |
| secondaryColor | string | "#a3a3a3" | Second colour: where the progress bar gradient ends. |
| glowColor | string | "rgba(255, 255, 255, 0.35)" | Soft glow around the current step. |
| className | string | — | Extra classes. |
Dependencies
4 required packages
npm install motion lucide-react clsx tailwind-merge