shadcn.io is not affiliated with official shadcn/ui
Now Playing Music Block for React
A whole music player as an app window with no sidebar: a drawn cover, a seek slider, previous, play and next, shuffle and a repeat button that cycles Off, All and One, a like toggle, volume with mute, and an Up next list that scrolls inside the window.
Installation
Overview
Give a streaming app its player screen, with this now playing window for React with Base UI. It shows Corvidale, an app for slow music, as a fixed-height window inside a hairline frame with a plus mark on each corner: a top bar with the title and the playlist, a large drawn cover with the track's title and artist, a Slider to seek with the elapsed and total time under it, and a transport row of previous, play or pause and next. Play is the only Shine Button and starts three pulsing bars; a Toggle holds shuffle and another the like, a Button cycles repeat through Off, All and One in words, and a second Slider sets the volume beside a mute toggle. Under it an Up next list of the tracks still to come scrolls inside the window; pressing a row plays it, and when the queue runs out an Empty state offers the way back to the top. On a phone the cover shrinks, the volume hides and the top bar's Queue toggle shows and hides the list. It's built from Slider, Toggle, Button, Shine Button, Empty and Guides, with a CSS entrance only. For music, podcast and audiobook apps, and as the full-screen view behind a mini player.
FAQ
How do I fill it with my own queue?
Edit QUEUE at the top of the file. Each track has an id, a title, an artist, an album, its length in seconds and an art for the cover: a pattern name and a ground. Times are written by one formatTime helper, "Up next" is worked out from the queue and the play order, and the count of tracks to come follows from it, so nothing is typed twice. The covers are drawn in code; replace the Cover component with an img of your own artwork and keep the title and artist beside it, which carry the meaning.
Does anything play, and what stays local?
No. The status line under the controls says so: no audio plays in this demo. Play and Pause only change state, the bars start and stop, and the position moves only when you seek, skip or press a row, never by a clock. Likes, shuffle, repeat and the volume live in the page and reset on a reload. To make it real, put an audio element behind the transport: call play and pause in toggle, set position from its time updates, set its currentTime from the seek handler, and send likes to your API.
What do shuffle and repeat do?
Shuffle swaps the Up next list to one fixed order and says so; the track that is playing stays where it is, and turning shuffle off puts the queue back in its own order. Repeat cycles Off, All and One, and changes what Next does at the end: with Off it stops and says the queue is over, with All it starts again from the top, and with One it starts the same track again. Previous goes back to the start of the track if more than three seconds have played, and to the track before it otherwise.
How do I use it from the keyboard?
Tab runs the top bar, the like toggle, the seek slider, the transport, the shuffle and repeat controls, the volume and then the Up next rows. The sliders move with the arrow keys and jump with Home and End, and both stay left to right on a right-to-left page, like the time they show. Every control is named for a screen reader: Previous track, Play or Pause, Next track, Like with the track's title, Mute, and the two sliders, with the position read as minutes and seconds. A polite status line says what changed.
Does the window change size?
Never. The window is a fixed height and only its regions scroll: on a desktop the Up next list scrolls inside the window and the player above it stays put; on a phone the page area scrolls. The status line has two lines of room, the three bars keep their place when they are hidden, and the empty state fills the list's own box.
What moves, and how does it look on a phone?
Only the three bars, and only while it plays: they pulse in CSS and stop with Pause. With reduced motion they stay still. On a phone the cover is smaller, the volume row is hidden, and the Queue toggle in the top bar shows and hides the Up next list so the player fits one screen.