Skip to content
Pinky UI

onboarding

Progressive Step Workflow

A staged product workflow keeps completed decisions compact, the active decision large and the next context visible.

  • onboarding
  • workflow
  • steps
  • progressive
Related pattern

Canonical product workflow for progressive decision continuity.

Live preview

Active decision · 1 / 3

Draft

Shape the brief.

One decision, kept in context.

Next context

ReviewCheck the path.

Quick usage

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

<ProgressiveStepWorkflow steps={steps} onActiveIdChange={setActive} />

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

  • The current task uses aria-current while completed decisions remain explicit edit buttons.
  • Continue, Back and blocked states use text labels, and state changes are announced only after an action.

Performance

  • Only the current task content renders; updates are discrete and host controlled.

Reduced motion

Removes layout travel while completed, current, blocked and upcoming structure stays visible.

When to use

  • Short product workflows where completed decisions should remain editable context.

When not to use

  • Long branching processes that need routing, persistence or a dedicated review screen.

Skill

Purpose

A staged product workflow keeps completed decisions compact, the active decision large and the next context visible, so the whole path stays legible as it's built.

Good for

  • Short product workflows where completed decisions should remain editable context

Avoid for

  • Long branching processes that need routing, persistence or a dedicated review screen

Usage

tsx
<ProgressiveStepWorkflow steps={steps} onActiveIdChange={setActive} />

Accessibility

  • The current task uses aria-current while completed decisions remain explicit edit buttons.
  • Continue, Back and blocked states use text labels, and state changes are announced only after an action.

Performance

  • Only the current task content renders; updates are discrete and host controlled.

Related: stepper, progressive-disclosure.

Open this skill on its own page