shadcn.io is not affiliated with official shadcn/ui
Discover Weekly Music Block for Solid
A weekly deck of ten picks you triage one at a time: a large drawn cover, a match ring out of 100, the artists it was picked because of, Save, Skip, Preview and Undo, and an Up next list with match bars.
Installation
Overview
Give listeners a short, finishable set of new music, with this weekly deck for Solid with Ark UI. It shows Sproutlist, a discovery app, as a header over a hairline frame with a plus mark on each corner, in a card and a side cell. The card shows one of ten typed picks for the week of 12 October: a large drawn cover, the title and artist, genre, mood and tempo Badges, a match ring with its number out of 100 and a line saying which artists it was picked because of. Save, the only Shine Button, Skip and a Preview Toggle sit under it. Save and Skip move to the next pick and keep focus on the same button, and Undo steps back. The header of the card counts "Saved 3, skipped 2, 5 to go", and the side cell lists the five picks after this one with a match bar each. After the tenth, an Empty state says how many you saved and offers Start over, in the card's own space. It's built from Shine Button, Badge, Toggle, Empty and Guides, with a CSS entrance only. For music, podcast and reading apps with a weekly set.
FAQ
How do I load my own weekly picks?
Edit PICKS: each line is a track id, a match out of 100 and the artists the pick came from, and LINES holds the track data (title, artist, genre, tempo, energy, mood, length and a cover pattern). The counts, the ring and the lists are worked out from the choices, so nothing is typed twice. In your app replace the local state with your API: call it in decide and undo.
Does anything play, and what stays local?
No. Preview only shows three moving bars and the status line says there is no audio in this demo; Save and Skip stop it. Saving a pick adds nothing to a library: the choices live in the page and reset on a reload. To make it real, add the track to the user's library in decide when the verdict is "saved".
Where does focus go after Save or Skip?
It stays on the button you pressed, so you can triage a deck with the same key presses. The card changes under it and the polite status line reads out what happened and the new counts. After the last pick, focus moves to Start over; after Start over or Undo it goes back to Save. The Undo button keeps its place in the foot, hidden when there is nothing to undo, so the foot never changes height.
What happens after the last pick?
Save and Skip stay in place but only answer "You have been through all 10", and the card is replaced, in the same space, by an empty state with the count of saved and skipped picks and a Start over button. Nothing in the layout moves, because the card and the empty state share one grid cell.