shadcn.io is not affiliated with official shadcn/ui
Learning Path Task List Block for React
A course syllabus in module bands with prerequisites, Video, Quiz and Exercise badges, per-module progress, time to go, an Up next lesson and a Complete up next button that ends in a drawn certificate card.
Installation
Overview
Show a learner exactly where they are, with this learning path block for React with Base UI. Four module bands list their lessons, each a Checkbox with a type Badge (Video, Quiz or Exercise) and its minutes, under a Progress bar and the time to go in that module. Modules have prerequisites: Components and State and data open once Foundations is done, the Capstone once both are, and a locked module names what it needs and keeps its boxes disabled. The first open lesson that isn't done is marked Up next, and the Shine Button "Complete up next" ticks it and moves on. The summary works out the time to go ("3 h 57 min"), and at 100% a drawn Certificate ready card fills the space reserved for it. Nothing is issued. Guides rule the bands. For courses, onboarding tracks and any ordered syllabus.
FAQ
How do prerequisites work?
Each module lists the module ids it needs. A module is locked until every one of those is complete, meaning all its lessons are ticked. Locked modules show a lock, say what they need and disable their checkboxes. Change CHAPTERS to reshape the graph.
How is Up next chosen?
It is the first lesson, in syllabus order, that is not done and sits in an open module. The row carries aria-current="step" and a visible Up next badge. If you untick an earlier lesson, Up next moves back to it.
Does it issue a certificate?
No. At 100% a drawn card appears in space that was reserved from the start, so the page doesn't jump. In your app, call your own endpoint from completeNext when the last lesson is ticked.