Skip to content
Pinky UI

loading

Multi-Step Progress

A visual progress preset for completed, current, upcoming and error states in a staged workflow.

  • loading
  • progress
  • steps
  • checkout
Variation of

Use Progressive Step Workflow when completed decisions and the active task need to remain in one product surface. Open Progressive Step Workflow

Live preview

  1. Plan
  2. Build
  3. Ship

Quick usage

usage
import { MultiStepProgress } from "@pinky-ui/systems";

<MultiStepProgress steps={steps} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for a compact visual progress view whose completed, current, upcoming, and error steps matter. For a product workflow that keeps the active decision open and completed context editable, use ProgressiveStepWorkflow instead.

Use when

Checkout, setup, onboarding, or upload pipelines have a meaningful sequence.

Avoid

Long navigation paths where a simple progress bar is clearer.

Accessibility

Expose the current step and error state in text, not only color or position.

Keyboard and touch

If steps are navigable, use buttons with clear labels; preserve the current step on mobile.

Reduced motion and performance

Animate only transitions between steps and clean up any host-owned async work.

Composition and anti-patterns

Share state with Stepper when navigation and progress need one source of truth.

Open this skill on its own page