Stepper Nav

#Installation & usage

Use it at the top (or down the side) of a flow where each step is its own page: checkout, onboarding, workspace setup. It shows where the reader is and lets them go back to any step they've done. It doesn't run the flow: validation, saving and what "Continue" does stay with your app, and upcoming steps can't be jumped to. When the steps live on one page and the component should own them, use a Wizard. To show progress without links, use a Stepper on its own.

import { StepperNav } from '@youj/react'

const steps = [
  { id: 'account', title: 'Account', description: 'Email and password' },
  { id: 'workspace', title: 'Workspace', description: 'Name and URL' },
  { id: 'plan', title: 'Plan' },
  { id: 'invite', title: 'Invite', optional: true },
]

export function SetupProgress({ step }: { step: number }) {
  return <StepperNav aria-label="Setup" steps={steps} current={step} href={(i) => `/setup/${steps[i]!.id}`} />
}

current is the index of the step the reader is on, usually read from the route. href maps a step to its page. The done steps and the current one become links, and the ones ahead stay plain text. Set current to steps.length once the flow is done, and every step shows its check.

Each step is a Stepper step: a title, an optional description, optional to add "Optional" under the title, and error to mark a step that needs another look. onNavigate fires as a step link is followed, which is where a client-side router takes over.

#Description

#Code