OOratiq

Progress Steps

Ready

Multi-step wizard indicator.

  1. AccountYour details
  2. 2
    PlanPick a tier
  3. 3
    PaymentCard or invoice
  4. 4
    Done

Installation

$ npx @oratiq-js/ui add progress-steps

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { ProgressSteps } from "@/components/ui/progress-steps";

Behaviour

  • An <ol> with aria-current="step" on the active item.
  • Completed steps show a check; pass onStepClick to allow jumping back — forward jumps are deliberately not offered.
  • Connectors and order follow the writing direction — step 1 starts at the reading edge in both LTR and RTL.
  • Vertical orientation for tall forms and mobile flows.

Props

PropTypeDefaultDescription
steps*{ title, description? }[]—The steps, in order.
current*number—Zero-based active index.
orientation"horizontal" | "vertical""horizontal"Layout axis.
onStepClick(index: number) => void—Enables clicking completed steps.

View source on GitHub → components/ui/progress-steps.tsx