shadcn.io is not affiliated with official shadcn/ui
Playlist Cover Music Block for Solid
A cover designer for a playlist: a drawn 2 by 2, single or striped cover whose tiles you press to change the album, an editable title, a Title on cover switch, derived track count and length, and a Save cover button that downloads a real SVG.
Installation
Overview
Let people dress a playlist before they share it, with this cover designer for Solid with Ark UI. It shows a Coverloom playlist in a hairline frame with a plus mark on each corner, split in two. At the start is the cover: a square of drawn album art laid out as a 2 by 2 collage, a single cover or four stripes, where every tile is a button that shows the next of the playlist's eight albums. At the end are the playlist's details, an Editable title and the track count, length and curator worked out from the eight albums, then a Segment Group for the layout, a Switch that lays the title over the cover on a translucent band, and a Save cover as SVG button. The foot holds a status line and Shuffle play, the one Shine Button. On a phone the cover sits on top at a smaller size and the controls stack under it. It's built from Editable, Segment Group, Switch, Button, Shine Button and Guides, with a CSS entrance only. For playlist, library and sharing apps.
FAQ
How do I use my own albums and artwork?
Edit ALBUMS. Each album has an id, a title, an artist, the number of its tracks in the playlist, their minutes and a drawn art entry (a pattern and a ground). The track count and the length in the details are summed from that list, so nothing is typed twice. The covers are drawn from foreground tones and never a photo; where your project has real artwork, swap the Cover component for an img and keep the title and artist beside it, because they carry the meaning.
How do the tiles and layouts work?
Every tile is a native button named for its place and its album, for example "Tile 2: Paper Moons. Show the next album". Pressing it moves that tile to the next of the eight albums and wraps at the end. The layout group changes how many tiles are drawn: four in a 2 by 2 grid, one that fills the square, or four tall stripes that crop the same art. The square never changes size, and each tile keeps the album you picked when you switch layouts.
How do I rename the playlist, and what does Title on cover do?
Press the pencil or the title to edit it, then press Enter or the check to keep it, or Escape or the cross to go back. An empty title is not kept: the old one comes back. The switch lays the title over the foot of the cover on a band that is 80% of the page background, so it reads over any tile in light and dark themes; its space is always reserved, so switching it never moves the cover. The title is also written into the saved file.
What does Save cover as SVG do, and what stays local?
It builds a real SVG file from the current layout, albums and title and hands it to the browser as a download, then releases the file straight away. The file uses named greys and black and white only, so it opens the same in any viewer. Nothing else leaves the tab: Shuffle play only changes its own label and the status line, which says that no audio plays in this demo. To make it real, upload the file to your storage on save and start your player from the shuffle handler.
How do I use it from the keyboard?
Tab runs through the four tiles, the title, its pencil, the layout group, the switch, Save cover and Shuffle play. Enter or Space on a tile shows the next album. In the title field, Enter keeps the new name and Escape cancels. The layout group moves with the arrow keys, and the status line announces each change politely.