shadcn.io is not affiliated with official shadcn/ui
Email Thread Timeline Block for Radix UI
A six-message shared-mailbox thread on a rail, with older messages folded to a line of sender, snippet and time, a quoted-text toggle on each, replied-after chips between messages, an unread dot, an Average reply 4 h 10 min summary and an Expand all button.
Installation
Overview
Read a long email thread without losing the order, the gaps or the quoted text, with this email thread timeline for React with Radix UI. It is written for Replybox, a fictional shared-mailbox tool. A hairline frame with a plus mark on each corner holds a summary band, "Average reply 4 h 10 min" with "6 messages, 3 people", and a ghost Button "Expand all". Below it six messages about a duplicate charge sit on a vertical rail, oldest first. The older ones are folded to one line with the sender, the start of the text and the time, using a Collapsible; the last is open. Opening a message shows its text and, behind a "..." Toggle, the quoted reply it answers. A chip above each message says "replied after 3 h 20 min", or "followed up after" when the same person wrote twice, counted from the typed times. One message carries an unread dot with the word Unread until it is opened. For shared inboxes, support tools and any thread where timing matters. The people and the messages are example data.
FAQ
How do I change the messages?
Edit MAILS at the top of the file, oldest first. Each has an id, a from, an ISO time at in UTC, the body, the quoted text it answers and the snippet shown while folded. The chips, the average and the counts are derived from the times and senders.
How is the average reply worked out?
It is the mean of the gaps between each message and the one before it, rounded to the minute and written as hours and minutes. Messages by the same person count as a gap too, and are named "followed up" in their chip.
What is the quoted text?
The part of the earlier message this one answers. It stays behind the "..." toggle, as in a mail client, so a long thread is not repeated on screen. The toggle has aria-pressed and the name "Show quoted text".
What stays in the page?
Which messages are open, which quotes are shown and which are unread, all in local state. Opening a message clears its unread dot, and Expand all marks everything read. Nothing is sent or saved. To wire it, record the read state from fold on your server.
Is it accessible?
The thread is an ordered list and each message heading is the trigger of its Collapsible, so it is a button with aria-expanded. Folded text is hidden from the keyboard and from screen readers. Unread is the word and a dot, never only the dot. The status line is a polite live region.