shadcn.io is not affiliated with official shadcn/ui
Continue Learning Sidebar Block for Radix UI
A learning platform in a fixed-height window whose muted sidebar opens with a Continue learning card (the next lesson, a progress ring and Resume), then courses in In progress, Completed and Saved groups with a bookmark on each.
Installation
Overview
Bring people back to where they stopped with this continue learning sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar in the theme's muted tone. At the top of the rail a card names the course you last worked on, its next lesson and a Circular Progress ring, with a Resume button that opens the course. Below it the courses sit in three groups, In progress, Completed and Saved, and every course in the first two has a bookmark Toggle that saves it. The page is the open course's lesson outline, and Finish lesson in the top bar completes the next lesson: the ring, the card and the percent follow, and a finished course moves to Completed while the card moves on to the next course in progress. No row has a bar of its own. Folded to icons the rail keeps each course's icon with a tooltip, and on a phone it is a sheet. It's built from Sidebar, Circular Progress, Toggle, Button, Shine Button, Avatar and Guides, with a CSS entrance only. For courses, tutorials, audiobooks and any library with a thing to pick back up.
FAQ
How does the Continue learning card choose a course?
It follows the course you last worked on: finishing a lesson in any course makes that course the card's course, and finishing a course's last lesson moves the card to the next unfinished course. When nothing is left it says All caught up and Resume says Nothing to resume, in place, so the card keeps its height.
What does Resume do?
It opens the card's course in the page, closes the sheet on a phone and says which lesson is next in the status line. The lesson itself is finished from the top bar, so the one primary stays in one place.
How do the bookmarks work?
Each course in In progress and Completed has a bookmark toggle with its own name, such as Save Spanish for travel. Pressing it adds the course to Saved and fills the bookmark; the Saved group lists those courses as plain links, and an empty Saved group says so. The toggle shows on hover and on focus, and always on a phone.
How are the courses wired?
The courses are links to # whose handler shows the page instead of navigating. They are SidebarMenuButtons with asChild around an a element. Point them at your routes and mark the current one with isActive and aria-current.
What stays in the page, and how do I connect it?
Everything. The six courses, their lessons and the starting counts are typed in COURSES, and progress and saves live only in the block's state. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To connect it, load the learner's progress and saved list from your API, call it when a lesson is finished, and keep the percent, groups and card worked out from those numbers.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The Continue learning card is at the top of it, so Resume is the first thing you reach. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.