Shadcn.io is not affiliated with official shadcn/ui
Profile Music Listener
React music listening profile block for Next.js with currently playing track, animated progress bar, top artists with play counts, and recently played list using shadcn/ui, Tailwind CSS, and framer-motion
Display music listening habits with this Spotify-inspired profile block for React and Next.js. Features a currently playing section with song title, artist name, and an animated progress bar, a top artists list with play count metrics, and a recently played tracks feed with album art placeholders. Built with TypeScript, shadcn/ui Avatar, Badge, and Button components, Tailwind CSS, and framer-motion pulse and bar animations. Perfect for music apps, social profiles, and activity feeds.
Related Components
Social Feed
Social media profile feed
Podcast Host
Podcast host profile
Musician Discography
Musician discography profile
Streamer Overlay
Streaming profile overlay
Content Creator
Content creator profile
Fitness Tracker
Fitness tracking profile
FAQ
Was this page helpful?
Sign in to leave feedback.
Mentor Availability
React mentor booking profile block for Next.js with calendar availability grid, session types, expertise tags, mentee reviews, and booking form using shadcn/ui, Tailwind CSS, and framer-motion
Musician Discography
React musician discography profile block for Next.js with album tracklist, streaming stats, genre badges, and audio waveform-style progress bars using shadcn/ui, Tailwind CSS, and framer-motion