shadcn.io is not affiliated with official shadcn/ui
Threaded Replies Chat Block for React
A channel where a reply count opens a thread in a second pane, with the parent, the replies, a reply field and Close; two threads keep their own drafts and the pane replaces the channel on a phone.
Installation
Overview
Keep side conversations out of the main channel, with this threaded replies chat for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height with two large panes for Threadbare, a team messenger, in its design-review channel. A message with replies shows a Button such as "3 replies" with the time of the last one; pressing it opens the thread in the second pane (the parent message, the chain of replies, a reply field and Close) and sets aria-expanded on the button. Replying in the pane updates the count in the channel after a typed teammate answers behind a Typing Indicator Text. Two threads are kept at once, each with its own unsent draft, and the first is open on load. Escape or Close shuts the pane and returns focus to the count; on a phone the thread replaces the channel, with Back in its top bar. The channel composer's Shine Button is the only colored control, the thread's send is outline. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a team messenger, a support inbox or any channel with side discussions.
FAQ
How is a thread tied to its message?
Every reply carries the id of the message it answers. The count and the time of the last reply under a message, the thread's heading and the reply chain are all filtered from one replies list by that id, so posting a reply updates the count in the channel without any second copy of the data.
Do drafts survive switching threads?
Yes. Drafts are kept as a list of text per thread, so typing in thread one, opening thread two and coming back finds the text where you left it. Sending clears only that thread's draft.
Where does focus go?
Opening a thread moves focus to its heading, so the pane is announced; Close, Back and Escape return it to the count button that opened it. Focus never moves on load, even though the first thread is open. Escape works from anywhere inside the pane.
What stays in the page, and how do I make it real?
Everything: replies come from a short typed script per thread and nothing is sent. To wire it for real, post each reply with its parent id to your server where postReply says so, and append what your server pushes to the same list.