asafefe.dev

Progress Steps

New

A stepper for onboarding and checkout. Connectors fill as you advance and finished steps draw a check.

motionutils@soultel/use-reduced-motion-safe
  2. Workspace, current step
  3. Invite team, not started
  4. Billing, not started
Step 2 of 4

Installation

$ pnpm dlx shadcn@latest add @soultel/progress-steps

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/progress-steps.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion
  2. 2. Copy the source from the Code tab into components/progress-steps.tsx.

Usage

example.tsx10 lines
import { ProgressSteps } from "@/components/progress-steps"

export function Onboarding({ step }: { step: number }) {
  return (
    <ProgressSteps
      current={step}
      steps={[{ label: "Account" }, { label: "Workspace" }, { label: "Invite" }, { label: "Billing" }]}
    />
  )
}

Props

PropTypeDefaultDescription
steps{ label: string; description?: string }[]-The steps, in order.
currentnumber-Active step index. steps.length marks all complete.
orientation"horizontal" | "vertical""horizontal"Layout direction.
onStepClick(index: number) => void-Makes completed steps clickable.