Shadcn.io is not affiliated with official shadcn/ui
Music Sleep Timer
A music sleep timer block for React and Next.js with preset duration buttons, large countdown display, end-of-track option, fade-out toggle, and cancel action built with shadcn/ui and Tailwind CSS
Schedule automatic playback stops with this calm sleep timer block for React and Next.js. Features preset duration buttons for 15, 30, 45, and 60 minutes, a custom time input, a large animated countdown with NumberFlow transitions, an end-of-track option, fade-out toggle, and a cancel button. Built with TypeScript, shadcn/ui Button and Switch components, framer-motion entrance animations, and Tailwind CSS. Perfect for music player apps, meditation platforms, and podcast listening interfaces.
Related Components
Music Queue Manager
Play queue with drag reorder
Music Crossfade Settings
Crossfade duration and curve configuration
Music Listening Stats
Personal listening statistics dashboard
Music Sharing Card
Share card generator with QR code
Music Sleep Timer
Sleep timer with countdown and presets
FAQ
Was this page helpful?
Sign in to leave feedback.
Sheet Viewer
A music sheet and score viewer block for React and Next.js with staff lines, key signature, tempo marking, time signature, instrument selector, and page navigation built with shadcn/ui and Tailwind CSS
Social Feed
A music social feed block for React and Next.js with listen, playlist add, like, and share activity items, track info, timestamps, and engagement counts built with shadcn/ui and Tailwind CSS