Left Right CTA with Progress Ring Tracker Block for React

Edit STEPS at the top of the file: a name and a done flag for each. The count in the ring, the headline ("One step to go until you're live"), the fill of each arc, the checks in the list and the ring's label for screen readers are all worked out from it. The ring is built for three steps: for another number, change the dash length and the offsets beside ARC, which are written in degrees.

Each arc is a circle with a dash pattern. The circle's radius is chosen so its circumference is exactly 360 units, which makes every dash a number of degrees: each arc is 104 of its 120 degrees and the offsets walk them round, leaving a gap between arcs. Finished arcs are drawn in your theme's foreground colour and the rest in its input colour. In a right-to-left layout the ring runs the other way round.

The ring is one image named "2 of 3 setup steps done: Create your workspace, Invite your team". The list says the same thing again in order, and each item starts with "Done" or "To do" in text that's visually hidden, so the check marks never carry the meaning alone.

The arcs and the parts of the block simply appear, finished, with no fade. There is no looping animation.

Both are links (href="#"): point Resume setup at the step that remains, ideally deep-linked, and Read the setup guide at your docs. Each button renders the link it's given with render, with nativeButton={false}.

Below lg the framed figure follows the text, so the headline and both buttons come first. Below sm the ring sits above the steps. The ring has a fixed size and everything else wraps, so it reads down to a 320 px screen.