A numbered workflow trail with completed, current and upcoming steps.
Name your studio.
CompletedBring your collaborators.
Current stepMake something considered.
Upcomingpnpm dlx shadcn@latest add @latheui/stepperPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Stepper is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* (required) | StepperStep[] | — | Ordered labels and optional descriptions. |
| current* (required) | number | — | Current step index, starting at 0. |
| onStepChange | (index: number) => void | — | Optional click handler. Apply your workflow rules in the callback. |
Combine the control with your own layout. Semantic colors follow the active theme.
import * as React from "react"
import { Stepper } from "@/components/ui/stepper"
export default function Demo(){const [current,setCurrent]=React.useState(1);return <Stepper className="w-full max-w-xs" current={current} onStepChange={setCurrent} steps={[{label:"Workspace",description:"Name your studio."},{label:"Invite your team",description:"Bring your collaborators."},{label:"Ready to create",description:"Make something considered."}]}/>}