Large Headline Side Checklist Features Block for React

Edit STEPS at the top of the file: each has an id, a title and a hint. START lists the ids that are ticked on load, and the meter and the count are derived from the number ticked, so they always agree with the list.

In one piece of state that holds the ids of the ticked steps. Nothing is saved: reloading the page returns to START. To keep progress, store that list wherever your app keeps user data and pass it in as the initial value.

Each row is a labelled checkbox: its name is the step's title and its description is the hint, and clicking the row toggles it. The count under the meter is a polite status, so a tick is announced as "4 of 6 done". The meter is named "Onboarding progress".

Yes. The card is a raised panel in a muted shell with + marks on its corners, with no dark scope, so it is light on a light page and dark on a dark one. A ticked box and the meter's fill use the foreground colour, so the section has no primary surface.

The section fades up once when the page loads, and the meter's fill eases to its new width when you tick a box. With reduced motion the entrance is off; the fill still changes, without a transition.

The headline comes first, a hairline rule separates it from the card, and the card follows at the full width. The headline steps down from text-6xl to text-4xl, and the checklist stays one row per step with nothing sideways at 320 pixels.