Shadcn.io is not affiliated with official shadcn/ui
Music 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
Keep perfect time with this React and Next.js metronome block. Features a NumberFlow-animated BPM counter with increment/decrement controls, a tap tempo button for setting speed by feel, time signature selection for 4/4, 3/4, and 6/8, animated beat indicator dots that pulse on each beat, a first-beat accent toggle, and a prominent start/stop control. Built with TypeScript, shadcn/ui Button and Switch components, NumberFlow for smooth BPM transitions, framer-motion beat animations, and Tailwind CSS. Perfect for music practice apps, rhythm training tools, and recording studio interfaces.
Related Components
Instrument Tuner Block
Chromatic tuner with needle meter display
Chord Chart Block
Chord progression display with diagrams
Concert Review Block
Concert review with ratings and highlights
Playlist Cover Block
Playlist cover generator with album grid
Streaming Dashboard Block
Music streaming analytics dashboard
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Mini Player
A compact music mini player bar block for React and Next.js with album art, track info, progress bar, playback controls, like toggle, and volume slider built with shadcn/ui and Tailwind CSS