Wizard Shell
Multi-step flow shell with a slim header step indicator, centered content column, and sticky back and continue footer.
Multi-step flow shell with a slim header step indicator, centered content column, and sticky back and continue footer.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Wizard Shell is the multi-step onboarding frame: a slim Acme header carries a four-step rail, Workspace (done, filled circle), Team (active, ring), Invite, and Billing, plus a Step 2 of 4 counter at the right edge. The centered content column shows the Set up your team heading with two card-framed dashed drop zones, one for the step form and one for optional Preferences. A sticky footer anchors Back on the left and Save and exit plus Continue on the right.
Steps are a const array with done and active flags. The dashed panels are deliberate placeholders; each step mounts its own form fields into those slots.
Reach for this block for any multi-step flow (setup, onboarding, checkout, configuration) where you want the step context always visible and progress never ambiguous.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the new workspace setup flow. Other wizard flows:
Tip: mark steps done only after the server confirms the save, not on click, so a failed submit does not advance the indicator.