PParable
All components

Stepper

Interactive

A horizontal or vertical progress stepper: numbered circles connect via a track whose accent fill grows across completed segments, the current step pulses inside a solid accent ring, and passing onStepClick turns completed/current steps into keyboard-operable buttons (upcoming steps stay inert). Under prefers-reduced-motion the connector fills snap in with no grow and the pulse is suppressed, leaving a static, legible ring.

  1. AccountYour details
  2. PaymentCard on file
  3. ReviewConfirm order
  4. DoneAll set

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/stepper.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/stepper.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ width: "100%", maxWidth: 460, padding: "28px 22px", borderRadius: 20, background: "linear-gradient(180deg,#161618,#0f0f10)", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.04), 0 24px 48px -28px rgba(0,0,0,0.85)" }}>
    <Stepper
      current={2}
      steps={[
        { label: "Account", description: "Your details" },
        { label: "Payment", description: "Card on file" },
        { label: "Review", description: "Confirm order" },
        { label: "Done", description: "All set" },
      ]}
    />
  </div>

Props

StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "onClick">

PropTypeDefaultDescription
steps*StepperStep[]—Ordered steps to render.
current*number—Index of the active step. Steps before it read as complete, this one as current, later ones as upcoming. Pass `steps.length` to mark all complete.
orientation"horizontal" | "vertical""horizontal"Layout axis. Defaults to `"horizontal"`.
onStepClick(index: number) => void—When provided, completed and current steps become keyboard-operable buttons that fire with their index; upcoming steps stay inert.
accentstring"#8b5cf6"Accent used for fills, checks and the current ring. Defaults to Parable violet `#8b5cf6` (mirrors the site `--pb-violet` token).

npm dependencies

  • lucide-react