shadcn.io is not affiliated with official shadcn/ui
Music Sharing Chat Block for Radix UI
A chat with track cards: a drawn record cover, a play toggle that says no audio in this demo, an add-to-playlist toggle, and a playlist popover where you reorder and remove tracks.
Installation
Overview
Trade songs in a conversation, with this music sharing chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Duetto, a music-sharing chat with Soline Marchand: Message and Bubble rows with track cards between them. A card holds a drawn record cover (circles, bars and arches in foreground weights, never a photo), the title, the artist and the length; "Play" flips a drawn progress bar and says "No audio in this demo", since there is no player, and "Add to our playlist" is a toggle that puts the track at the end of the shared list. The top bar's "Our playlist (3)" opens a Popover with the list: Move up, Move down and Remove on each track and the total length worked out ("11 min"). Ask for "another" and Soline sends the next card. The composer's Shine Button, the only colored control, posts to the thread. The frame is ruled by Guides, and everything moves with CSS only. For a music app, a shared-playlist feature or any chat where people pass tracks.
FAQ
Does it play anything?
No. Play only flips the drawn progress bar and the card says "No audio in this demo"; the status line says it too. In your app, connect the button to your player or streaming service and keep the title and artist as text beside the cover.
How does the playlist work?
It is one ordered list of track ids. Add to our playlist appends or removes a track, the popover moves a track one place at a time (Move up is off on the first, Move down on the last) and the total is the sum of the lengths rounded to minutes. After a move, focus returns to the same control.
Where do the covers come from?
They are typed data: a pattern and a ground, drawn as a few paths in foreground weights over a muted ground, so they follow the theme. Swap the Cover for an image if you have artwork.
What stays in the page, and how do I make it real?
Everything. The tracks, the playlist and Soline's replies live in the page, and nothing is sent. To wire it for real, save the list from add, move and remove to your server and send track cards from your messages.