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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.