Product Card Vinyl Record

Vinyl record product card with tracklist, format details, and playback preview for React music stores

Display vinyl records on your Next.js music store with this product card component. Features album artwork, artist and label info, tracklist with side markers, vinyl format and weight, pressing details, and add to cart. Built with shadcn/ui components using Tailwind CSS. The music-focused design appeals to vinyl collectors—perfect for Shopify headless record shops, independent music stores, or any React app selling physical music. Authentic and collector-friendly.

Installation

InstallPro block

npx shadcn@latest add https://www.shadcn.io/r/product-card-vinyl-record.json

npx shadcn@latest add https://www.shadcn.io/r/product-card-vinyl-record.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/product-card-vinyl-record.json

bunx shadcn@latest add https://www.shadcn.io/r/product-card-vinyl-record.json

Product Card Variants

Product card with color and size variant selectors for React ecommerce stores

Product Card Virtual Event

Virtual event ticket card with timezone converter, platform badge, and calendar sync for React event apps

Product Card Vinyl Record

Installation

React Product Card Simple

React Product Card Collectible

React Product Card Book

React Product Card Digital

React Product Card Limited Edition

React Product Card Reviews

FAQ

Product Card Vinyl Record

Installation

Related Components

React Product Card Simple

React Product Card Collectible

React Product Card Book

React Product Card Digital

React Product Card Limited Edition

React Product Card Reviews

FAQ

How do I add track previews?

How do I show vinyl condition?

How do I show pressing details?

How do I link to full discography?

How do I add want list functionality?

How do I show different pressings?