shadcn.io is not affiliated with official shadcn/ui
Music Playlist Carousel Block for Vue
A queue of ten tracks on two pages of five rows with drawn covers, titles, artists, albums and lengths, where the page follows the playing row, plus Play and Pause, Previous and Next track, and a way back to now playing.
Installation
Overview
Keep a queue in step with what is playing with this music playlist carousel for Vue with Ark UI. Vinylcraft, a listening-club app, lists ten tracks on a track of two pages of five rows, each with a drawn cover, the title and artist, the album and the length. A slim bar holds Previous track, the block's one primary (Play, then Pause), Next track and a button for each page. The list follows the playing row: Next track or picking a row moves the marker and the page that holds it, and if you browse to the other page "Back to now playing" appears. Three small bars move beside the playing row while it plays and stay still under reduced motion. There is no audio: the bar says so. It is built from Carousel, Button and Guides, with CSS transitions only. The club, the tracks and the artists are made up for the example.
FAQ
What does the list follow?
The playing row. Picking a row, Next track and Previous track all set the playing row and move the track to the page that holds it. Browsing to the other page does not change what is playing; it only shows the way back.
Does anything play?
No. Play and Pause only change the marker and the status line, and a note under the bar says "No audio in this demo." To wire it for real, drive an audio element from playAt and toggle, and set the row from its ended event.
Where do the covers come from?
They are drawn from a few shapes in your theme's foreground weights, so they follow light and dark mode and need no images. Swap Cover for an img and keep the title and artist beside it: they carry the meaning.
How does it work with a keyboard?
Every row is a button, so Tab and Enter pick a track. Previous and Next track stay in the tab order at the ends and are marked unavailable instead of disabled. Rows on the other page are hidden from the tab order and screen readers. The line above the note is the one live region.