shadcn.io is not affiliated with official shadcn/ui
Album Grid Music Block for Svelte
An album shelf of twelve drawn covers with a genre filter showing counts, a sort select, an S, M and L size group, a Queue button on each cover and an inspector band with the picked album's tracks, runtime, label and genre.
Installation
Overview
Let people browse a collection by its covers, with this album shelf for Svelte with Ark UI. It shows a Shelfsong collection in a hairline frame with a plus mark on each corner. A toolbar band holds a Toggle Group of genres with their counts (All 12, Indie 3, Folk 3 and so on), a sort Native Select with Newest, Oldest, Title and Artist, and a size group, S, M and L, for four, three or two covers across. Under it a shelf of twelve drawn covers sits on shared hairlines in a region that keeps its height and scrolls inside itself. Each cover is a button that picks the album, and a Queue button on the cover (always shown on touch, on hover and focus elsewhere) adds it to the queue. An inspector band under the shelf shows the picked album's drawn cover, title, artist and year, its tracks, runtime, genre and label. On a phone the shelf is two covers across and the toolbar scrolls sideways. It's built from Toggle Group, Native Select, Button and Guides, with a CSS entrance only. For music libraries, record shops and collection apps.
FAQ
How do I load my own albums?
Edit DISCS. Each album has an id, a title, an artist, a year, a genre id, a label, its tracks and minutes, and a drawn art entry (a pattern and a ground). The genre counts, the sorted order and the inspector are all worked out from that list. The covers are drawn from foreground tones and never a photo; swap the Cover component for an img where you have real artwork and keep the title and artist beside it.
How do the filter, sort and size controls work?
Pressing a genre shows only its albums and the status line says how many of the twelve are shown. The sort re-orders the shelf by year or by name, and ties keep a fixed order. The size group changes how many covers sit across from the medium breakpoint up: four, three or two. The shelf has a fixed height and scrolls inside itself, so no control ever moves the page or the inspector.
What does the Queue button do?
It adds the album to a local queue and turns into a tick; pressing it again takes the album out. The status line says what was queued and how many are in the queue, and says that no audio plays in this demo. To make it real, hand the queued ids to your player. The button is a separate control beside the cover button, so picking an album and queueing it never share a click.
How do I use it from the keyboard?
Tab runs through the genre group, the sort select, the size group and then each cover and its Queue button in order. Enter or Space on a cover picks it, and the picked cover shows a ring and is marked as current. The Queue button is reachable even when it is hidden until hover, because it appears as soon as it has focus.
How does it look on a phone?
The shelf is two covers across at every size setting, the genre group scrolls sideways inside the toolbar band with its focus ring kept inside, and Queue buttons stay visible because there is no hover. The inspector stacks its figures in two columns under the cover and title.