shadcn.io is not affiliated with official shadcn/ui
Read Receipts Comments Block for React Aria
Six announcements with a roster of five as radios, a marker line after the last comment each person read, Seen by 3 of 5 on every comment and a Share my read status switch.
Installation
Overview
Show who has seen what, with this read-receipts thread for React with React Aria. A compact header names the thread and holds the one primary, a Shine Button that says "Mark all as read". The frame opens with a roster of five people as radios under "Read up to...": choosing one draws a marker line in the thread after the last comment they read, with words such as "Linnea read up to here, 2 unread". Below it a Switch says Share my read status, and turning it off removes you from everyone's list and from the count. Each of the six announcements ends with a small Avatar group and "Seen by 3 of 5". A marker place is reserved after every comment, so moving the line never moves the thread. On a phone the roster scrolls sideways and the line stays. For announcements, handoff notes and any thread where "did they see it" matters.
FAQ
How do I fill it with my own people and posts?
Edit PEOPLE (an id, initials, a name and upto, how many comments they have read) and POSTS. "You" is the person with the id you; its position lives in state. The seen counts, the avatar groups and the marker text are worked out from the positions.
What does Share my read status do?
With it off, you no longer count as having seen anything: the avatar groups lose you, and "Seen by 3 of 5" becomes "of 4". Your own marker still moves when you read, because it is yours. Real products also hide your "last seen" time here.
What does Mark all as read do?
It moves your position to the last comment, so your marker goes to the end and, if you share, every comment gains you. When you have read everything the button stays and says so.
What stays local?
The chosen person, your position and the switch. The status line names each change and nothing is saved or sent. To make it real, store one read cursor per person and thread, update yours when comments enter the viewport, and return the others' cursors with the thread.