shadcn.io is not affiliated with official shadcn/ui
Message Delivery Status Chat Block for React Aria
A team messenger thread where each message of yours carries a glyph and a word for Sending, Sent, Delivered or Read, walks through them on a short timer when you send, and opens Message info with the time of each step when you press its status.
Installation
Overview
Show how far each message got with this delivery status chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Postlea, a team messenger: the top bar names Tomasz Veldkamp, and the log is a day label and a run of Message and Bubble rows. Under every message of yours sits its time and its state as a glyph and a word: a clock and "Sending", one tick and "Sent", two quiet ticks and "Delivered", two ticks at full weight and "Read", never a color. Press the state of any message and its Message info opens, a small list with the typed time of Sent, Delivered and Read. Send a message and it walks through the four states on a short timer while a Typing Indicator Text precedes the reply. The composer's Shine Button, the only colored control, sends. The frame is ruled by Guides, and everything moves with CSS only. It's for a messenger, a support inbox or any thread where people want to know a message arrived.
FAQ
What stays in the page, and how do I make it real?
Everything. The four states are driven by a short timer in this file (about a second and a half in all), the replies come from a typed script, and nothing is sent, as the line under the composer says. To wire it for real, set each message's phase from your server's acknowledgements (accepted, stored, delivered to a device, opened) and drop the timer; the glyphs, words and Message info already read from phase.
How are the four states told apart without color?
By shape and word together: a clock with "Sending", one tick with "Sent", two ticks in the muted tone with "Delivered", and two ticks at full weight and bold with "Read". The word is always beside the glyph, and the glyph is hidden from assistive technology because the word says the same.
What does Message info show?
The typed time of each step: Sent and Delivered carry the message's own time and Read one minute later, and a step not reached yet says "Not yet". The trigger is a real button with aria-expanded, so it opens with Enter or Space, and only one message's info is open at a time. Replace the three times with the timestamps your server returns.
What happens under reduced motion?
The timer does not walk the steps: a new message lands straight on "Read", so nothing waits or changes on its own, and the status line still says where it landed. The chevron turn on the info button also stops.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden "You, 09:41" or the person's name, and each step is spoken once through the polite status line ("Delivered: your message of 09:43."). The info buttons are in the tab order between the messages and the field.