shadcn.io is not affiliated with official shadcn/ui
iMessage Style Chat Block for Solid
A narrow pill thread with no avatars, a centred stamp, a pill composer with Send inside the field, and one live receipt line that moves from Delivered to Read as the reply is typed.
Installation
Overview
Show a phone-style conversation, with this iMessage style chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Softley, a phone messenger: no avatars, a centred stamp ("Today 09:41"), Bubble pills for both sides and a pill-shaped Input Group composer with the Shine Button, the only colored control, inside the field. One receipt line sits under your newest message: "Delivered" when you send, then "Read" with a time as soon as the reply starts being typed, shown by a bubble of three dots from Typing Indicator Text; the line then moves to your next message. The read word is weight and text, never a color. The frame is ruled by Guides, and everything moves with CSS only. For a phone messenger, a compact support widget or any thread that should feel light.
FAQ
How does the receipt work?
Sending a message sets the line under it to "Delivered". After a short wait (600 ms) the reply starts being typed: the line becomes "Read 09:45" with the next typed time, and the typing bubble appears. The reply then lands and the receipt stays under your message until you send another, when it moves. Both waits are timers started by your send and cleared if you leave the page.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script, as the line under the composer says; nothing is sent and no model runs. To wire it for real, send each message to your server where the code says so, and set "Delivered" and "Read" from the delivery and read events your service reports.
Does it copy a real messenger?
It borrows the look only: pills, centred stamps, a pill composer. The product is a fictional one and nothing in the copy names a brand. The bubbles still use two tones from your theme, filled for you and outlined for them, so the thread reads in any preset.
How does the composer work?
It is a single-line field, so Enter sends by submitting the form. Send, inside the field, stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending. There is no multi-line input here; the grown composer is in the customer support chat.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. With no avatars or per-message times on screen, each message begins with a hidden "Wren Ostrander, 09:42" or "You, 09:43", and the receipt is written text. The dots in the typing bubble are hidden from assistive technology, which hears the typing text once.