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.
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
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.