Stepper
Pro
Numbered steps joined by connectors that fill as you advance, with ticks drawn on finished steps.
Email and password
- Step 2 of 4: Studio, current step
Name and logo
- Step 3 of 4: Game, not started
Title and genre
- Step 4 of 4: Launch, not started
Pick a date
Step 2 of 4
Customize
Orientation
4
#ff784f
Installation
Stepper is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy stepper.tsx into components/ui and run npm install motion.
Usage
import { Stepper } from "@/components/ui/stepper";
<Stepper
steps={[{ title: "Account" }, { title: "Profile" }, { title: "Launch" }]}
current={step}
onStepClick={setStep}
/>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| steps | { title: string; description?: string }[] | — | Steps in order. |
| current | number | — | Index of the active step, from 0. Steps before it show as completed. Pass steps.length to finish. |
| defaultCurrent | number | 0 | Starting step when uncontrolled. |
| onStepClick | (index: number) => void | — | Makes completed steps clickable and reports the clicked index. |
| allowSkip | boolean | false | Lets people click ahead to steps they haven't reached. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
| color | string | "#ff784f" | Color of finished and active steps. |
| className | string | — | Extra classes for the list. |
Dependencies: motion