shadcn.io is not affiliated with official shadcn/ui
Playlist Format Awards Block for Vue
Awards as a tracklist: a now playing card with a drawn record, an ordered list of seven tracks chosen by arrow keys, and a Shuffle toggle. No audio.
Installation
Overview
A tracklist for Vue with Ark UI. A split: at the start a "now playing" card with a drawn record in its sleeve (grooves, a sheen that turns a notch with each choice, a laurel on the label), then the chosen award as the title, its programme as the artist and a "Track 3 of 7" line, and a Shuffle toggle. At the end, an ordered list of seven tracks: a number, the award, the programme, and the year in the duration column. There is no audio: it is a way to browse. The awards and programmes are made up for the example.
FAQ
How do I change the tracks?
Edit TRACKS: each has an award, a category, a programme and a year. The count, the numbering and the "Track n of N" line come from the list. SHUFFLED is the fixed play order used when Shuffle is on.
How does the keyboard work?
The rows are buttons in one roving group: Tab enters the list on the chosen row, the up and down arrows move the choice and the focus, Home and End jump to the ends, and Enter or Space chooses a row. The chosen row has aria-current.
What does Shuffle do?
It is a toggle button with a pressed state. Pressed, the rows trade places in another fixed order and the chosen award stays chosen. Unpressed, the list is back in the original order. The list keeps the same height.
What moves?
Only the sheen on the record turns a notch when you choose a track, and it does not move under reduced motion. Nothing plays on its own.