Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Read Receipts Group Chat Block for Ark UI

A family group thread where small initials avatars mark each member's last read message, Seen by under your newest opens each member's read time, readers catch up one by one after you send, and a switch turns receipts off for both sides.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show who has read up to where with this read receipts chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Eyeline, a family group messenger: the top bar names the "Lake weekend" thread with four people, and the log is a day label and a run of Message and Bubble rows. Under each member's last read message a small initials avatar sits, members at one message forming a tiny stack, and under your newest message "Seen by Ana and Kofi" opens a Popover with each member's read time and "Not yet" for the one who has not. Send a message and the readers move on along a bounded chain, Ana after 0.8 seconds, Kofi after 1.6 and Lena after 2.4, while the text updates; under reduced motion they move at once. A Switch in the top bar turns Read receipts off for both sides, and the status line says so. The composer's Shine Button, the only colored control, sends, and the frame is ruled by Guides. It's for a group thread where people want to know who has seen what.

FAQ

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

Everything. Each member's position is a typed record of the message they last read and the time they got there, and the chain after a send is three timeouts in this file. Nothing is sent, as the line under the composer says. To wire it for real, store a lastReadId and a timestamp per member, update them from your server's read events, and drop the timer; the markers, the "Seen by" text and the popover already read from that list.

How are the markers placed?

By data. Each reader holds the id of the last message they read, and every message shows the readers whose id matches it, so people at the same message form one stack and a reader moves by changing the id. Only other members get markers; your own read position is never drawn, and the stack is hidden from assistive technology with a sentence in text instead: "Read up to here by Ana and Kofi."

What does Seen by show?

The members who have read at least up to your newest message, in words: "Seen by Ana", "Seen by Ana and Kofi", "Seen by Ana, Kofi and Lena" or "Not seen yet". Pressing it opens each member with the typed time they read it, or "Not yet". It is a real button, so Enter and Space open it and Escape closes it.

What does the switch turn off?

Read receipts are reciprocal, as in most messengers. Off, the markers and the "Seen by" line disappear for you and the status line says "You won't see read times and others won't see yours." The positions are still tracked in the demo, so turning it back on shows where everyone is now.

What happens under reduced motion?

The readers do not walk one by one: after you send, the three timeouts run at once and all three markers land together. The status line still says each name as it is applied.

How does it look on a phone?

The same single column: the switch keeps its place in the top bar with its label read by screen readers only, the markers stay under the bubbles and the popover opens over the log. The window keeps its height and only the log scrolls.