shadcn.io is not affiliated with official shadcn/ui
Vinyl Collection Music Block for Radix UI
A crate of twelve record spines in a sideways-scrolling shelf, filterable by 12 inch and 7 inch; pressing a spine pulls the record, sliding the disc out of its drawn sleeve beside a list of label, year, speed and condition grade.
Installation
Overview
Browse a record collection the way you flip through a crate, with this vinyl collection for React with Radix UI. It shows Sleeveshelf's records in a hairline frame with a plus mark on each corner. A toolbar band holds a Toggle Group for All, 12 inch and 7 inch and a count worked out from what is showing ("12 records, 7 play at 33 1/3"). Below it is a shelf of twelve spines, the album set in vertical writing on each, in a named region that scrolls sideways, with 12 inch spines standing taller than 7 inch ones. Pressing a spine lifts it and pulls the record: its drawn sleeve appears in the cell at the end and the disc slides part way out, while a list gives the artist, label, pressing year, speed, size and condition grade. A Popover explains what Mint, Near Mint, VG+ and VG mean. There is no price and no cart. It's built from Toggle Group, Popover, Button and Guides, with a CSS slide only. For record collections, library apps and any shelf of things you pull out one at a time.
FAQ
How do I load my own records?
Edit RECORDS: each record has an id, title, artist, label, pressing year, speed (rpm), size in inches, a condition grade, a drawn cover, a spine tone from 0 to 3 and a width class. The spines, the detail list and the count in the toolbar are all worked out from the array. The spine's height follows the size, 12 inch tall and 7 inch short, so a mixed crate looks like a real one.
How is the count worked out?
The filter picks the records to show, and the count line is the number of those, then how many of them have a speed of 33 1/3. All twelve gives "12 records, 7 play at 33 1/3"; 7 inch gives "4 records, 0 play at 33 1/3". It is derived each time, never typed.
What happens to the chosen record when I filter?
If the pulled record is hidden by the filter, the first record that is showing is pulled instead, so the detail and the sleeve are never empty. The crate keeps its height, so the filter changes only the spines you see.
How do I use it from the keyboard?
The shelf region is focusable, so the keyboard can scroll it, and the spines are a toggle group: Tab to it, use the arrow keys to move between spines and press Space or Enter to pull one. Focus stays on the spine you pressed and the status line says which record was pulled.