Onboarding Checklist
Split layout pairing a guided onboarding pitch and reassurance rows with a setup checklist mockup showing a progress bar and highlighted current step.
Split layout pairing a guided onboarding pitch and reassurance rows with a setup checklist mockup showing a progress bar and highlighted current step.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Onboarding Checklist answers the blank first day with a plan. A pitch column pairs a heading and lede with three reassurance rows, skip and come back, sample data until yours arrives, a human checks in if you stall, each an icon beside a title and a line. Beside it sits a framed setup checklist mockup with a progress header, done and upcoming steps with status circles, and the current step highlighted with a resume badge. The reassurances defuse the three fears that stall a new signup.
The steps are one array of title, text, and status, and the progress count and bar derive from how many are marked done, so editing the array moves the bar. Done rows carry a filled check, the current row a ringed dot and a Resume chip, upcoming rows an empty circle. The block stays a server component built from markup and theme tokens.
Reach for this block on product pages where the buyer fear is a lonely empty workspace. Showing the exact setup checklist, with most steps already ticked, turns the first session from a void into a short list. It is the guided cousin of tour-steps-with-screens, which walks the same journey as screens rather than a live checklist.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the five step first campaign setup. Other checklists:
Tip: mark most steps done and leave one current, a checklist that is nearly finished reads as easy in a way an empty one never does.