shadcn.io is not affiliated with official shadcn/ui
Vinyl Store Music Block for React Aria
A record shop's sale bin of eight drawn sleeves with two or three single copies each by grade, a genre filter, a grading guide popover, and a sticky cart foot with a free-shipping progress bar and Check out.
Installation
Overview
Sell records one copy at a time, with this vinyl store for React with React Aria. It lays Dustjacket's sale bin in a hairline frame with a plus mark on each corner: a toolbar band with a genre Toggle Group and a Grading guide Popover, then eight sleeves on shared hairlines, two columns on a phone and four on a wide screen. Each sleeve has a drawn cover, the title and artist, the genre and year, and its single copies by grade (Near Mint, VG+ or VG) in a Segment Group, where the price follows the choice. Add to cart puts that one copy in the cart and the same button takes it out. The cart foot stays in view with the count, the subtotal, a Progress bar toward free shipping at $60, and Check out as the one Shine Button. Prices are whole cents, the bin keeps its height under any filter, and nothing is charged. It's built from Toggle Group, Popover, Segment Group, Progress, Shine Button and Guides. For record shops, second-hand marketplaces and any store that sells single items by condition.
FAQ
How do I load my own records?
Edit SLEEVES: each sleeve has an id, title, artist, genre, year, a drawn cover and its copies, each a grade and a price in whole cents. The grades in the segment group, the genre buttons, the totals and the shipping goal (FREE_SHIPPING, with SHIPPING as the flat rate below it) all come from that data. To show photos, replace the Cover with an image and keep the title and artist beside it.
Why are copies single items, not a quantity?
A used record is one physical copy, so each grade of a sleeve can be in the cart once. Choosing another grade shows that copy's price and button, and the cart can hold two different copies of the same album. The button reads "In cart" for a copy that is already there, and pressing it again removes it, with the status line saying so.
How is the free-shipping goal worked out?
The subtotal is the sum of the copies in the cart in whole cents. Under $60 the bar shows how far along it is and the line says how much more to add ("Add $8.50 more for free shipping."), and the flat $5 shipping is shown next to the subtotal; at $60 the bar is full and shipping disappears. The figures are examples.
Does filtering change the page height?
No. The bin always has eight cells; a genre fills some with sleeves and leaves the rest as empty cells the size of a sleeve, so the toolbar, the cart foot and everything below stay where they are.
What stays local, and how do I make it real?
The cart, the grades you picked and the check-out message live in the page and reset on a reload. Check out says "Held in this demo. Nothing was charged." and takes no card. In your app send the cart's sleeve ids and grades to your own order endpoint from checkOut, and let your payment provider's hosted checkout take the card.