shadcn.io is not affiliated with official shadcn/ui
Learning Track Picker Onboarding Block for Svelte
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 Svelte with Ark 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 move between the headers, and Home and End jump to the first and last. The status line is a polite live region, so each pick is read out as its line.