shadcn.io is not affiliated with official shadcn/ui
Learning Progress Dashboard Block for Radix UI
Four training courses with progress, modules done and time, and the chosen course drawn as a vertical path of done, current and locked modules with a Mark module complete button that advances it and earns the certificate.
Installation
Overview
Walk a course module by module, with this learning progress panel for React with Radix UI. A hairline frame with a plus mark on each corner lists four Lessonwell courses as rows with a Progress bar, modules done of total, the time they take and whether the certificate is earned; on a phone the rows are a Native Select. The chosen course is drawn below as a vertical Steps path of four modules, with a filled marker for each one done, an outlined marker for the one you are on, and the rest locked. Mark module complete, the block's one Shine Button in an action foot, finishes the current module: the bar, the counts and the path recompute, and at the last module the certificate reads Earned. It's built from Steps, Progress, Native Select, Shine Button and Guides. For team training and onboarding hubs.
FAQ
How do I fill it with my courses?
Edit COURSES: each has an id, a title, a start count of modules already done and modules, each with a title and a length in minutes. The percentages, the totals in hours and minutes, the certificate line and the path are worked out from those.
Why can I only complete the next module?
The path is in order: the module you are on is the next one after those done, and the rest are locked. Mark module complete always finishes the current one. When every module is done the button waits and the status line says the certificate is earned.
When is the certificate earned?
When every module of the course is done. Until then the course shows how many modules are left, and the path's header repeats it. The certificate is a word, not a file: nothing is issued in this demo.
What stays local, and how do I wire it for real?
Everything: progress lives in the page and resets on reload, and no learner record is written. To make it real, load each learner's completed modules from your learning system, send a completion from the button's handler, and issue the certificate on the server.