shadcn.io is not affiliated with official shadcn/ui
Learning Path Carousel Block for React
A course of eight modules where prerequisites lock the later ones: a path rail with lessons, hours, level and a lock or a check, a slide for the chosen module, and Mark module done to open what it was holding back.
Installation
Overview
Lay out a course so the order matters with this learning path carousel for React with Base UI. Learnmere, a self-paced course site, offers eight TypeScript modules. A rail at the start lists them with a number, a title, lessons, hours, a level and a lock or a check; the chosen module's slide sits beside it. Each module names what it builds on, so Functions in depth waits for Core syntax and the CLI project waits for both Testing and Async patterns. A locked slide says "Finish Foundations to open this" and has a button that goes there, and the arrows skip what is out of reach. "Mark module done" opens the modules it was holding back, and the status line says which. A bar counts the done modules. On a phone the rail becomes a select with locked options marked. It is built from Carousel, Native Select, Badge, Button and Guides, with CSS transitions only. The course and its modules are made up for the example.
FAQ
What locks a module?
Its needs list. A module is open when every module it needs is done. The first locked module in path order is still reachable so you can read what it needs; the ones after it are not, and their rail entries and select options are marked unavailable.
Can I undo a module?
Yes, with "Reopen module", unless a module that needs it is done. The status line then names the one to reopen first, so the path never contradicts itself.
Where does the progress come from?
From the done modules only: the count and the bar are derived, so there is no separate number to keep in step. The line under the track is the one live region and says what opened.
How does it work with a keyboard?
Tab reaches the rail (or the select on a phone), Previous, Next and the primary. Previous and Next skip modules that are out of reach and stay in the tab order at the ends. Slides that are not in view are hidden from the tab order.
The page follows Embla's own select event, and the rail calls scrollTo.