Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Karaoke Party Chat Block for Radix UI

A karaoke room thread where a host bot announces turns and a duet card with three parts you can claim or release, plus a Cheer toggle; there is no audio and no timer.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Fill a duet from a group chat, with this karaoke party chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Chorusby, a virtual karaoke night: the host bot, Mic Master, announces who is up and posts a duet card with three parts, Verse 1, Verse 2 and Chorus, as buttons that each name who holds them. You can claim one, press another to move, or press yours to let go; when all three are held the card says "Ready" and the bot posts the trio. A Toggle cheers, moving a count by one. The log is flat Message rows, and the composer's Shine Button, the only colored control, sends your message. There is no audio, no lyrics view, no queue and no timer. It's the starting point for a party room, a watch-along or any thread where people sign up for parts.

FAQ

What stays in the page, and how do I make it real?

Everything, and there is no audio: the page never asks for the microphone, and the line under the composer says No audio in this demo. Holders and cheers are local state, and chat replies come from a short script. To wire it for real, save claims on your server so two people cannot take one part, and have the bot post when the server confirms the third.

How do I claim, move or release a part?

Press an open part to take it. Press another open part and you move there, so you hold at most one. Press the part you hold to let it go. A part held by someone else is disabled, and the status line says what you did.

When is the duet ready?

When all three parts have a holder. The card badge changes from Needs a voice to Ready and the bot posts a line like Duet: Wrenna, Orla and you. Release your part and the badge goes back.

Is it usable with a keyboard and a screen reader?

Each part is a button whose text names its holder, the one you hold is marked pressed, the Cheer toggle is pressed or not, and the chat is a focusable log region. State is a word and a fill, never a color alone.

How does it look on a phone?

The three parts stay in one row and shrink to fit, the bubbles take up to 80% of the width, and the window keeps its height with only the log scrolling.

All 200 chat blocks