Getting Started Empty State Block for React

The ticked steps live in the page's state and nothing is saved or sent: reload and "Set up your profile" is the only step done. For the real thing, start START from your account's completed steps and save each tick where the code says so. Make the button a link to the next step's own page instead of ticking it, and let the checkboxes show what your product already knows is done.

Next is the first step that is still open, so it moves as steps are ticked; any step can be ticked or unticked in any order, and the headline, the count, the bar, the trail and the button's label all follow. Done and Next are written as words, never only as a color.

It is one inline SVG that only changes classes: each stretch of trail has a dashed copy and a solid copy that fades in when that stretch has been walked, the waypoints fill in, and the flag moves to the done count with a transition on its position. Reduced motion switches the transitions off. The drawing is decorative and hidden from screen readers; the checklist, the headline and the status line say the same thing in words.

Tab visits each checkbox, then the button, then Start over, which stays quiet (and says so if pressed) until something has changed. Each checkbox is named by its step and described by its hint, and a click anywhere on the row ticks it. Every change is written to a polite status line in the pinned foot ("Start your first project: done."). The progress bar is decorative because the count is in the text beside it.

The trail moves above the list and shrinks to 110 px tall, with the list under it. The foot, with the status line and the button, stays pinned to the bottom of the screen while the card scrolls under it, so the next step is always one tap away.

No. The headline, the count and the Next marker change text in places that already have their room, and the button keeps one line. Start over is always there, quiet until something has changed, so the button never moves.