shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Sell a record the way a record shop shows it with this vinyl record product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds two cells with a divider between them. The start cell draws a square sleeve with a record half out of it and a Toggle, "Spin the record", that turns the disc slowly until it is pressed again; the words "No audio in this demo" sit beneath it. The end cell has the title, the artist and the facts of the chosen format, a Segment Group with "12 inch LP" and "7 inch single", Tabs for Side A and Side B with each track's number, title and length and the side's running time, the price and the one Shine Button, "Add to bag". Choosing the single re-prices the record, shrinks the disc and swaps the tracks for the two on the 7 inch. Nothing is played, stored or bought. For record labels, shops and any release sold in more than one format.
FAQ
How do I change the release and its formats?
Edit FORMATS. Each has an id, a label, the price in cents, a facts line and its tracks, each with a side, a title and a length in seconds. Lengths and each side's running time are computed from the seconds, and the tabs follow whatever sides the tracks name.
How does the spinning record work?
The toggle turns on a slow CSS rotation (seven seconds a turn) and turning it off stops it; nothing else on the page moves. When the visitor's device asks for reduced motion the disc stays still and the status line says so instead of pretending. The disc never starts by itself.
Does the page jump when I change side or format?
No. Every list of every format is drawn unseen in the same grid cell as the live panel, so the panels are always as tall as the longest list, four tracks. The 7 inch single has only two tracks and simply leaves space under them.
Does it play anything?
No. It says "No audio in this demo" and only the disc moves. To add a sample, put an audio element next to the toggle and call play() and pause() from spin; keep the reduced-motion check so the disc does not turn for those who asked it not to.
What stays local, and how do I wire it for real?
The format, the spin and the bag are page state; nothing is stored, charged or sent. The bag holds the format, so the LP and the single are separate lines. Replace the body of add and undo with your cart calls. The sleeve is typed shapes: swap Picture for an img of the sleeve.
Is it accessible?
The sleeve is a named image, the format group and the side tabs are named, and the track lists are ordered lists with their side in the name. The toggle is a pressed button, so a screen reader hears whether the record is spinning, and every change is announced by the polite status line.
