Shadcn.io is not affiliated with official shadcn/ui
Music 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
Display song lyrics with style using this React and Next.js synced lyrics viewer block. Features a highlighted current line that scrolls into view, auto-scroll toggle, adjustable font size controls, per-line timestamps, and track info header with artist and album. Built with TypeScript, shadcn/ui Button and Switch components, framer-motion line transitions, and Tailwind CSS. Perfect for music streaming apps, karaoke interfaces, and media player UIs.
Related Components
Podcast Player Block
Podcast player with speed controls
Radio Station Block
Live radio station with now playing
Sound Mixer Block
Multi-channel audio mixer with faders
Library Browser Block
Music library with sortable columns
Lyrics Viewer Block
Synced lyrics display with auto-scroll
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Metronome
A metronome block for React and Next.js with NumberFlow BPM counter, tap tempo, time signature selector, visual beat indicator dots, accent toggle, and start/stop control built with shadcn/ui and Tailwind CSS