Shadcn.io is not affiliated with official shadcn/ui
Music Vinyl Player
A vinyl turntable player block for React and Next.js with rotating record animation, tone arm, speed selector for 33 45 and 78 RPM, track info display, and play pause stop controls built with shadcn/ui and Tailwind CSS
Bring the warmth of analog playback to your interface with this vinyl turntable player block for React and Next.js. Features a CSS-animated rotating record with label art, a tone arm that moves into position on play, speed selection between 33, 45, and 78 RPM, current track info with artist and album, and full transport controls. Built with TypeScript, shadcn/ui Button components, framer-motion entrance and rotation animations, and Tailwind CSS. Perfect for music streaming apps, retro-themed audio players, and vinyl collection showcases.
Related Components
Vinyl Collection Block
Vinyl record library browser
DJ Deck Block
Dual turntable DJ mixer
Queue Manager Block
Drag-and-drop playback queue
Beat Maker Block
Drum machine step sequencer
Studio Session Block
Recording studio session controls
FAQ
Was this page helpful?
Sign in to leave feedback.
Vinyl Collection
A vinyl record collection display block for React and Next.js with cover placeholders, RPM info, condition ratings, pressing year, and CSS spin animation built with shadcn/ui and Tailwind CSS
Vinyl Store
A vinyl record store block for React and Next.js with record display cards, price tags, condition grades, genre filter tags, add-to-cart buttons, and cart summary footer built with shadcn/ui and Tailwind CSS