shadcn.io is not affiliated with official shadcn/ui
Left Right CTA with Progress Ring Tracker Block for React Aria
A band call to action between solid rails: a headline, a sentence and the Shine Button at the start, and at the end a framed figure with a progress ring drawn in three arcs, one per setup step, with the steps listed beside it.
Installation
Overview
A resume-your-setup call to action for React with React Aria, for an analytics tool called Beacon. At the start, a headline says how many steps remain, one sentence says what the last one unlocks, and the Shine Button "Resume setup" sits beside an outline "Read the setup guide". At the end a framed figure, a hairline frame with + marks on its corners, holds a progress ring drawn in three arcs, one for each setup step, with the finished ones filled and "2 of 3" in the middle, and the steps listed beside it with a check on the done ones. The ring is plain SVG, the arcs fade in one after another with CSS, and every colour comes from your theme's tokens (the filled arcs are foreground, so the Shine Button stays the only primary). Use it in a dashboard or on a landing page for returning visitors, to bring a half-finished sign-up back to the step that remains.
FAQ
How do I change the steps?
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.
How is the ring drawn?
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.
What do screen readers hear?
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.
What happens with reduced motion?
The arcs and the parts of the block simply appear, finished, with no fade. There is no looping animation.