shadcn.io is not affiliated with official shadcn/ui
Flat Messages Chat Block for Vue
A team channel drawn as flat rows with no bubbles: runs collapse under one name, later times appear in the gutter, and a reply count expands the replies inline with a Reply field that adds to the count.
Installation
Overview
Show a channel the way a workspace app does, with this flat messages chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Threadholm, a team workspace: Message rows with a ghost Bubble, so there is no bubble at all, only an avatar, a name and a time on one line and the text beneath. A run of one sender collapses under a single header, and the time of each later row shows in the gutter on hover, on focus and always on a phone. Under a message, a link such as "3 replies, last 09:30" opens a Collapsible thread inline, under a hairline rule, in the same flat form with a Reply field; posting there adds the reply and the link's count follows. The composer's Shine Button, the only colored control, posts to the channel and a teammate answers behind a Typing Indicator Text. The frame is ruled by Guides, and everything moves with CSS only. For a team chat, a comment feed or any thread read as a document.
FAQ
How do the inline replies work?
Each message holds its replies as a list. The link under a message shows the count and the time of the latest ("3 replies, last 09:30") and opens a collapsible with the replies and a Reply field. Posting adds a reply to that message and the count and time follow, because they are worked out from the list. A message with no replies shows a quiet Reply link on hover and focus, and on a phone always. The thread pane for a whole channel of threads is a separate block.
What stays in the page, and how do I make it real?
Everything. The channel's answers come from a short typed script, and replies you post stay in the page; the line under the composer says nothing is sent. To wire it for real, send messages and replies to your server where the code says so and append what arrives to the same list.
How can I read a time on a keyboard or a touch screen?
Every message begins with a hidden "Name, 09:12" for a screen reader. For sighted use, the first row of a run shows its time beside the name, and each later row shows its own in the gutter: on hover, when the row has focus (rows after the first of a run take the Tab key for this) and always on a phone, where there is no hover.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition is left alone. The field grows with its content up to a limit, Send stays quiet while it is empty and says so if pressed, and focus stays in the field after sending. The Reply fields inside threads are single-line and submit with Enter.