shadcn.io is not affiliated with official shadcn/ui
Learning Track Picker Onboarding Block for React
A course library's first-run track picker as a whole screen: three tracks in a single-open accordion where the open row is the choice, its first lessons, and a line and a button worked out from the pick.
Installation
Overview
Let a new learner choose where to start, with this track picker for React with Base UI. It is a whole screen of Trailhurst, an online course library for designers: the page's rails and one band across it, a step header (a two-letter mark, "Step 4 of 6" and a hairline of progress), and a framed panel holding three tracks in an Accordion that never closes all the way. The open row is the choice: a radio dot in each header shows which, and the row opens to its first four lessons with their minutes. The line under the rows works out the pick from the same lists (“Design foundations: 18 lessons, about 2 h 40 min”), and the one Shine Button names it, “Start Design foundations”. Skip for now leaves it for later. On a phone the two actions pin to the foot of the screen. For course libraries, bootcamps and any app where the first decision is a path.
FAQ
How does opening a row choose a track?
The accordion is controlled and single: exactly one row is open, and the open row's id is the choice, held in picked. Opening another row closes the first, and pressing the open row again does nothing, so there is always a track to start. The radio dot is drawn by the trigger's expanded state, so it can't disagree with the row.
Where do the lesson counts and times come from?
From the lists. Each track holds its first lessons with minutes, plus how many more follow and how long they take; the lesson count, the total time and the line under the rows are worked out from those, never typed twice. To use your own courses, edit TRACKS: the headers, the panel and the button all follow.
What stays local in the demo, and how do I wire it?
Start and Skip only change the status line: “Saved in this demo” or “Skipped in this demo”. Nothing is saved or enrolled. In your app, send picked to your server from start, open the track's first lesson, and keep Library as the place a learner can switch later, as the sentence promises.
Can I use it from the keyboard?
Yes. Tab reaches each row's header, and Enter or Space opens it. The arrow keys don't move between headers on this base; Tab does. The status line is a polite live region, so each pick is read out as its line.
Related
- Pro
Role Selection Onboarding
One choiceA role question as a stack of five cards, each with an icon and a line on what it opens first, a field inside Something else that waits at its height, and one sentence that says where the product will start you.
- Pro
Skill Assessment Onboarding
Several choicesFour skills rated with a segmented control each, and a result band that works out the overall level, where to start and which basics to skip from the four ratings.
- Pro
Goal Setting Onboarding
One choiceA goal question split in two: four goals as radio rows on one side and the plan the pick makes on the other, three things to set up with an Include switch each and one sentence that counts what stays.
- Pro
Use Case Onboarding
One choiceA use-case question as a grid of six tiles on shared hairlines, each a native radio with a small drawing of its board, and one sentence under the grid that says which board opens first.
- Pro
Setup Progress Onboarding
ChecklistsA teachers' app's setup progress as a whole screen: a big rolling percent over a bar, a line of steps done and minutes to go, one button that finishes the next step, and three foldable bands that list every step as Done, Next up or To do.
- Pro
Achievement Trail Onboarding
Milestones and recapsA language-learning app's first-run trail: eight milestones along a winding path drawn from hairlines, three reached, a you-are-here ring, a hover card per node, a rolling count and progress, and a button that previews the next unlock.