shadcn.io is not affiliated with official shadcn/ui
Course Modules Carousel Block for React
Eight course modules on a track that opens on the first one with a lesson to do, with lessons you tick, a bar per module and a side cell that counts 11 of 36 lessons and resumes module 4.
Installation
Overview
Open a course where the learner left off with this course modules carousel for React with Base UI. Syllabee, an online-course platform, shows eight modules (getting started through a final project) on a hairline track. The track opens on the first module with a lesson still to do, earlier modules read "Done", and each slide holds its hours, a difficulty word, a progress bar and its lessons as checkboxes. A side cell at the end, under the track on a phone, counts "11 of 36 lessons", draws a bar for the whole course and holds the block's one primary, "Resume module 4". Pressing it brings that module back into view and moves focus to it. Ticking a lesson recounts the module's bar, the total and the module to resume. It is built from Carousel, Badge, Button and Guides, with native checkboxes and CSS transitions only. The course and its lessons are made up for the example.
FAQ
Where does it open?
On the first module with an unticked lesson, worked out from the ticks the page starts with. Change TICKED_AT_START and the track, the counts and the primary follow.
Embla's startIndex is that module; keep it in step with TICKED_AT_START if you change the starting ticks.
What does Resume do?
It goes to the first module with a lesson to do, moves focus to that module's title and says so in the status line. Once every lesson is ticked it reads "All modules done" and is marked unavailable.
Where do the numbers come from?
From the ticks only: each module's count and bar, the course total and bar, the "Done" labels and the module to resume are all derived from one list of ticked lessons.
How does it work with a keyboard?
Tab reaches the lessons of the module in view, Previous, Next and Resume. Space ticks a lesson. Modules out of view are hidden from the tab order and screen readers.