Stepper
A step indicator with a spring-filled progress line and a number-to-checkmark morph.
Account
Email & password
2
Profile
Name & avatar
3
Workspace
Invite your team
4
Done
All set
Interactive
Drive active from state to walk through the steps — the line fills and each
completed step morphs its number into a checkmark.
Account
Email & password
2
Profile
Name & avatar
3
Workspace
Invite your team
4
Done
All set
Vertical
Account
Email & password
Profile
Name & avatar
3
Workspace
Invite your team
4
Done
All set
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/stepper.json"Usage
tsx
import { Stepper } from "@godui/components";
<Stepper
active={current}
steps={[
{ label: "Account" },
{ label: "Profile" },
{ label: "Done" },
]}
/>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | Step[] | — | { label, description? }. |
active | number | — | Zero-based current step; earlier steps render complete. |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |