Shadcn.io is not affiliated with official shadcn/ui
Music Now Playing
A now playing music player block for React and Next.js with album art, animated progress bar, play/pause/skip controls, volume slider, and shuffle/repeat toggles built with shadcn/ui and Tailwind CSS
Deliver a premium listening experience with this now playing music player block for React and Next.js. Features an album art placeholder with animated waveform bars, track title and artist display, a framer-motion animated progress bar with time stamps, play/pause/skip controls, a volume slider, and shuffle/repeat toggles. Built with TypeScript, shadcn/ui Button and Slider components, framer-motion for smooth animations, and Tailwind CSS. Perfect for music streaming apps, podcast players, and media dashboard interfaces.
Related Components
Playlist Manager Block
Drag-and-drop playlist management UI
Album Grid Block
Album collection grid with genre filters
Artist Profile Block
Artist card with top tracks and followers
Equalizer Visualizer Block
Animated equalizer with genre presets
Playlist Manager Block
Sortable track list with duration
FAQ
Was this page helpful?
Sign in to leave feedback.
Notification Settings
A music notification preferences block for React and Next.js with toggle switches for new releases, playlist updates, concert alerts, weekly digest, friend activity, and download notifications built with shadcn/ui and Tailwind CSS
Open Mic
An open mic night signup and schedule block for React and Next.js with performer registration, time slot management, current performer display, waiting list, and audience vote system built with shadcn/ui and Tailwind CSS