Skip to content
Pinky UI

onboarding

Stepper

A basic horizontal, vertical or compact accessible workflow stepper for explicit progress.

  • onboarding
  • steps
  • workflow
  • progress
Related pattern

Use Progressive Step Workflow when completed decisions should remain editable context.

Live preview

  1. Plan
  2. Build
  3. Review

Quick usage

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

<Stepper steps={steps} active={active} />

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 to show a finite workflow position with completed, current, upcoming, and error states. For product flows where completed decisions should remain editable context, use ProgressiveStepWorkflow instead.

Use when

Setup, checkout, onboarding, or staged creation has a meaningful sequence.

Avoid

Forcing a long linear tour or using step numbers as decoration.

Accessibility

Expose the current step and use buttons only when navigation is allowed.

Keyboard and touch

Step navigation remains operable with focus and touch; content is not hidden behind color.

Reduced motion and performance

Keep state transitions restrained and preserve the current step immediately when motion is reduced.

Composition and anti-patterns

Share state with MultiStepProgress when both are visible in one workflow.

Open this skill on its own page