Setup Progress Stepper
Four step horizontal stepper with dot states and an open invite panel under the current step.
Four step horizontal stepper with dot states and an open invite panel under the current step.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Setup Progress Stepper is a four step horizontal stepper: Account done, Workspace done, Team current, Data upcoming. Dot states match the tracking timeline pattern: filled solid for done, filled with a halo ring for current, border-only for upcoming, connector lines dim for the upcoming segment. The open panel beneath Team shows Invite your team with a single email Input, a Send invite button, and then the skip link given equal prominence with an honest note: skipping is fine, everything in this step can be redone from Settings, nothing is locked to onboarding.
Steps are a const array with state as a union. The parity between the skip link weight and the submit button signals to users that neither path is penalised.
Reach for this block in a multi step setup flow, wired to router state so the active step reflects the current URL segment and the dot states update on route change. Wire the skip link to advance the router, not dismiss.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace setup wizard. Other steppers:
Tip: the Step 3 of 4 counter in the top right gives users a progress guarantee without depending on them reading the dot row.