shadcn.io is not affiliated with official shadcn/ui
Listen Together Music Block for Svelte
A listening room as an app window: a top bar with an initials stack, a listener count and Leave room, a now-playing strip, four reaction toggles whose counts move by one, a chat log with a system line, and a composer where Enter sends and typed sample replies arrive after a typing line.
Installation
Overview
Give friends a room to hear a song and talk over it, with this listening room for Svelte with Ark UI. It is an app window with no sidebar in a hairline frame with a plus mark on each corner and a fixed height: a top bar with the room's name, a stack of initials with "5 listening" and a Leave room Button that becomes Join; a now-playing strip with a drawn cover, the title, the artist, the host and a position bar that stays where it is; a row of four reaction Toggles with counts; the chat log, built from Message and Bubble, with a system line when someone joins; and a composer with a Textarea and a Shine Button to send. Enter sends and Shift and Enter add a line. Replies come from a short typed script after a typing line, and nothing connects or plays. It's built from Avatar, Toggle, Message, Bubble, Textarea, Shine Button and Guides, with a CSS entrance only. For social listening, watch-party and fan community apps.
FAQ
How do I connect it to a real room?
Replace three things: SEED with the messages your room returns, PEOPLE with its members, and post, which today appends your line and starts a typed reply, with a call that sends it to your server. Subscribe to the room for new lines and call the same function that appends them; the log scrolls to the newest line on its own.
Where do the replies come from?
From REPLIES, a short typed script: one answer per message you send, from a different member each time, after a typing line, then a last line that says the samples have run out. No model runs, and the status line says the replies are samples.
What do the reactions do?
Pressing one adds one to its count and pressing it again takes it back, which is the whole behaviour: nothing is sent to anyone. They are native toggle buttons named with their count, with glyphs and no emoji characters, and they turn off with the composer when you leave the room.
How does it work with a screen reader and the keyboard?
The log is a named region that opens on the newest line and can be scrolled with the keyboard; each message reads its sender and time first. The composer is labelled, Enter and Shift and Enter are explained in text tied to it, and one polite status line says what happened. The initials stack is decoration: the count is in words.