Shadcn.io is not affiliated with official shadcn/ui
Music Listening Stats
A personal music listening statistics block for React and Next.js with top genres bars, top artists list with play counts, total listening hours, and a weekly activity heatmap grid built with shadcn/ui and Tailwind CSS
Visualize personal listening habits with this music statistics block for React and Next.js. Features top genre distribution as animated horizontal bars, a ranked top artists list with play counts, a total listening hours display with CountUp animation, and a weekly activity heatmap grid showing most active listening times. Built with TypeScript, shadcn/ui Badge components, framer-motion entrance animations, react-countup for animated stats, and Tailwind CSS. Perfect for music streaming dashboards, year-in-review pages, and user profile listening summaries.
Related Components
Music Queue Manager
Play queue with drag reorder
Music Sleep Timer
Sleep timer with countdown and presets
Music Crossfade Settings
Crossfade duration and curve configuration
Music Sharing Card
Share card generator with QR code
Music Listening Stats
Personal listening statistics dashboard
FAQ
Was this page helpful?
Sign in to leave feedback.
Listen Together
A social listening room block for React and Next.js with host display, listener avatars, now playing track, real-time emoji reactions, chat messages, and join/leave controls built with shadcn/ui and Tailwind CSS
Lyrics Viewer
A synced lyrics viewer block for React and Next.js with highlighted current line, auto-scroll toggle, font size control, and timestamp display built with shadcn/ui and Tailwind CSS