shadcn.io is not affiliated with official shadcn/ui
Queue Manager Music Block for React
A play queue of nine tracks you reorder by dragging a grip or from a row menu with Move up, Move down, Play next and Remove, with a live total, an undo, an inline clear confirmation and a Recently played list.
Installation
Overview
Let people shape what plays next, with this queue manager for React with Base UI. It holds Cuebarn's queue in a hairline frame with a plus mark on each corner, in three bands. The first shows the track that is playing, with a Toggle that starts three pulsing bars. The second lists nine Next up tracks, each with a grip you drag with a pointer, its number, a drawn cover, title, artist and length, and a Dropdown Menu named for the track with Move up, Move down, Play next and Remove, which are the keyboard and touch route on their own. The numbers and the total ("9 tracks, 35 min") are worked out again after every change. Remove and Clear queue leave an Undo in the status line, and Clear queue asks first, inline, with Clear and Keep. An emptied queue shows an Empty state at the list's height. The third band lists Recently played with an Add to queue Button on each row. There is no drag library: pointer capture and a hit test do the work. It's built from Dropdown Menu, Toggle, Button, Empty and Guides, with a CSS entrance only. For music players, playlists, karaoke and any list people reorder.
FAQ
How do I load my own queue?
Edit TRACKS for the queue and RECENT for the played list: each track has an id, title, artist, length in seconds and a drawn cover, and NOW is the track that is playing. INITIAL is the order the queue opens in. The total, the numbers and the count in the heading are all worked out from the current order, so nothing is typed twice. In your app replace the local state with your player's queue and call its methods in shift, playNext, remove and add.
How does dragging work, and what if I can't drag?
Press a grip and move: the row follows the pointer's position in the list and the others make room, and releasing drops it where it is. The grip is a pointer route only; every move also has a menu item, so nothing depends on dragging. Move up and Move down shift a track by one place, Play next puts it at the top, and the status line says where each track landed, for example "Paper Sun moved to position 2 of 9." At the ends it says the track is already first or last.
How do Undo and Clear queue work?
Before Remove or Clear queue changes the list, the block keeps a copy of it, and Undo puts that copy back and says how many tracks were restored. Clear queue never empties the list on the first press: it turns into "Clear 9 tracks?" with Clear and Keep, focus moves to Keep, and Keep puts focus back on Clear queue. After Remove or Clear, focus moves to Undo so the next key press can take it back. The Undo button keeps its place in the status line, hidden when there is nothing to undo, so the line never changes height.
Does anything play, and what stays local?
No. The status line starts by saying no audio plays in this demo, and Play only starts the bars. The order, removals and additions live in the page and reset on a reload. To make it real, keep the queue in your player's state or on your server, and make each handler update it and rewrite the order from the response.
How do I use it from the keyboard?
Tab to a row's menu button, named "More actions for" the track, and open it with Enter, Space or the arrow keys; Move up, Move down, Play next and Remove are menu items. After a choice, focus returns to the menu button of the same track, which stays with it as it moves. The Add to queue buttons stay in place and focusable when a track is already in the queue, and then say so instead of adding it twice.