shadcn.io is not affiliated with official shadcn/ui
Circle Indicators Stepper Block for Radix UI
A music-theory course in four module cells with a progress ring each, where ticking lessons moves the ring and the course total, and modules open in any order.
Installation
Overview
Show how far along each part is, with this ring stepper for React with Radix UI. A plus-marked frame holds a Steps strip of four hairline cells for the modules of a course (Rhythm, Scales, Chords and Form). Each cell is a Circular Progress ring in foreground tones with the module number in its middle, which turns into a check at 100%, and under it the title and "3 of 5". The open module's five lessons are Checkbox rows; ticking one moves its ring and the course total at the top, "7 of 20 lessons", which is worked out from the ticks. Modules open in any order, so done is drawn per module rather than by position. "Next module" is the block's one Shine Button, and the last press shows a summary. On a phone the rings sit two by two. For courses, onboarding checklists and multi-part tasks.
FAQ
How do I change the modules and lessons?
Edit MODULES: each has an id, a title, an intro and its list of lessons. The rings, the counts, the total and the closing summary are all derived from the lessons and the ticks array. START is what the student has ticked when the page opens: put their saved progress there, or empty it.
Why does the ring not follow the step?
Because a student can do the modules in any order, so a finished module is one with all its lessons ticked, not one before the open step. The block uses the Steps parts for the tabs, keys and panels, and draws the ring and check itself; the catalog's own indicator would show a check for every module before the open one.
What stays local?
The ticks are component state and are lost on reload; nothing is sent to a teacher. The closing panel says so. To make it real, send the key of each tick to your API from toggle and read the saved set into START (or the initial state).
What does a screen reader hear?
The rings are decorative. Each cell is a button named by its module title, with its count ("3 of 5") read next to it, and the polite status line reads "Module 2 of 4: Scales, 3 of 5 lessons" and updates as you tick, so the effect of a tick is heard. Lessons are checkboxes with their own labels.