Setup Checklist with Progress
The get-started card that ships with its first item already ticked, a native <progress> element rather than a div bar, and a dismiss control that appears only once there is nothing left to abandon.
8 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
The get-started card that ships with its first item already ticked, a native <progress> element rather than a div bar, and a dismiss control that appears only once there is nothing left to abandon.
A choice-driven wizard with a persistent side rail, real radio groups in a fieldset so arrow keys work, and visited steps navigable while steps ahead stay out of the tab order.
The onboarding step where a product becomes multiplayer: pasted addresses split into chips, typos marked rather than dropped, and an honest way to skip.
A tour step anchored to the control it explains, with a spotlight cut by one spread shadow, a visible step count and focus that follows the step.
The "what best describes you" step, asked honestly — every option states what it actually changes, the skip is visible and names what you get instead, and the choice is reversible.
The empty product’s real first question. Sample data is offered with equal weight rather than as grey small print, every connector names its scope before the redirect, and each option carries the honest duration.
The first screen after signup, asking only the two things that cannot be changed silently later.
What a migration actually moves and what it cannot, stated before the switch rather than discovered after it.