shadcn.io is not affiliated with official shadcn/ui
Music Education Music Block for Solid
A music lesson catalogue: filter ten courses by instrument and level, enrol with a toggle, and a Your path cell adds up the weekly hours and the weeks to finish at that pace, with Start lesson and Remove on each course.
Installation
Overview
Help a learner plan lessons, not just browse them, with this music education catalogue for Solid with Ark UI. It shows Lessonloft, a music lessons school, in a hairline frame with a plus mark on each corner. A Toggle Group filters by instrument (All, Piano, Guitar, Voice, Drums) and a Select by level. Each of ten courses has a drawn cover, its title, a level Badge, the lessons done, the hours a week it asks for, a Circular Progress ring and an Enrol Toggle. Enrolling moves a course into Your path, the side cell, which adds up the weekly hours and the hours still to go and says how many weeks everything takes at that pace, the hours to go over the weekly hours, rounded up. Start lesson only says what it would open, since no lessons play in this demo. The course list and the path keep one height, with an Empty state each. It's built from Toggle Group, Select, Toggle, Circular Progress, Badge, Button, Empty and Guides, with a CSS entrance only. For online-course, music-school and learning apps.
FAQ
How do I add my own courses?
Edit COURSES: each has a title, an instrument, a level, the number of lessons, how many are done, the hours the whole course takes, the hours a week it asks for, and a drawn cover (a pattern and a ground). The filters, the rings, the hours to go and the weeks are all worked out from those numbers; the instrument and level lists are in INSTRUMENTS and LEVELS.
How is the number of weeks worked out?
For each enrolled course the hours still to go are its hours times the lessons not yet done over its lessons, kept in tenths of an hour so no decimal fraction is ever added. The weeks are the total hours to go divided by the total hours a week, rounded up. With two courses of 5 hours a week and 19.5 hours to go, that is four weeks. With nothing enrolled it says to enrol; with everything finished it says so.
What happens when a filter hides an enrolled course?
The course stays on your path: filters only change the list. If nothing matches, the list shows an empty state with a Show all courses button, at the same height as the list, so the page does not move. Remove in the path takes a course off even when the list hides it, and focus goes to the Your path heading.
What stays local, and how do I make it real?
Enrolment lives in the page and resets on a reload; Start lesson only writes a sentence in the status line. In your app, post the enrolment, load each course's progress from your API, and have Start lesson open the next lesson (the one after the lessons done).
How do I use it from the keyboard?
Tab to the instrument group and use the arrow keys, then the level select, then through the list: each course has one Enrol toggle, announced with the course's name and whether it is on. In the path, each course has Start lesson and Remove buttons named for it. The status line says what changed.