NavigationAnimated
Stepper
Multi-step progress with an ink-filling connector.
A stepper shows progress through a multi-step flow: onboarding, checkout, setup wizards. Completed steps turn into checks, the current step glows, the connector fills like ink toward it, and completed steps can be clickable.
Preview
- AccountName and email
- 02WorkspaceTeam and URL
- 03BillingPlan and card
- 04DoneInvite your team
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/stepper.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/stepper.
Builds on: motion
Usage
import { Stepper } from "@/components/ui/stepper";
<Stepper steps={[{ title: "Account" }, { title: "Billing" }]} current={0} />Motion
How it moves
Connectors fill toward the current step and its marker pops (GSAP).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Stepper
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { title; description? }[] | — | The steps. |
| current | number | — | Zero-based current step. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout. |
| onStepClick | (index: number) => void | — | Makes completed steps clickable. |
Accessibility
- An ordered list; the current step has aria-current="step".
- Clickable steps are buttons with a descriptive label.
FAQ
Also searched as: react stepper · multi step form · wizard component · progress steps · checkout steps