shadcn.io is not affiliated with official shadcn/ui
Comments Timeline View Block for Vue
A project thread on a day rail with sticky day heads and markers for every silence over a day, a jump-to-day select and an oldest or newest first switch that recounts the gaps.
Installation
Overview
Show how a discussion unfolded over time, with this comment timeline for Vue with Ark UI. A compact header names the project thread and a hairline frame has a toolbar band, a heading band and a held scroll region. The toolbar holds a Segment Group for Oldest first and Newest first and a Native Select to jump to a day. The region is a rail: comments sit under sticky day heads on a thin vertical line, each with an initials Avatar, the time and the words, and wherever more than 24 hours passed between two neighbours a quiet marker says how long the silence was, such as 4 days later. Choosing a day scrolls the region to its head. Switching the order flips the whole rail and the markers are worked out again for the new direction (4 days earlier). A polite status line names each change. It is built from Segment Group, Native Select, Avatar, Badge and Guides, with a CSS entrance only. For project journals, incident threads and any discussion where the gaps matter as much as the comments.
FAQ
How do I use my own thread?
Edit PEOPLE and REMARKS (an id, an ISO at, who wrote it and the body), oldest first. The day groups, the day counts, the Jump to day options and the silence markers are all derived from the timestamps.
How are the silences worked out?
For each pair of neighbouring comments in the order on screen, if more than 24 hours separate them the marker shows the difference in calendar days. A comment at 23:00 followed by one at 08:00 the next day is not a silence; a comment on Tuesday afternoon followed by one on Thursday morning is, and reads 2 days later. In Newest first the same gaps read earlier.
What does Jump to day do?
It scrolls the held region so the chosen day's head sits at the top. It does not move the page, and the status line says where it went. The sticky day heads keep showing which day you are in as you scroll on.
What stays local?
The thread, the order and the position. To make it real, load comments by date range as the region scrolls and keep the gap markers in the client, since they depend only on neighbouring timestamps. Time zones matter: here every time is UTC and says so.
Is it accessible?
The rail is an ordered list of days, each a heading and a list of comments, inside a labelled scroll region that takes Tab. The order switch and the day select have names, and a silence marker is real text between the days, not a decoration. Times are time elements and names are isolated for right-to-left text.