shadcn.io is not affiliated with official shadcn/ui
Notification Center Timeline Block for React
A team inbox on a rail with one divider, You last looked here: nine events across two days, a New word on those after it, a derived count, and Mark all as seen, which moves the divider to the top with Undo.
Installation
Overview
See what is new since you last looked with this notification center timeline for React with Base UI. It is written for Sincelast, a fictional team inbox, and draws nine events across Tuesday and Wednesday under day heads, newest first. A typed time for the last visit places one divider on the rail, You last looked here: Tue 13 Oct, 16:40, and the events above it carry the word New with a dot. A band over the rail counts them, 5 new since 16:40, and holds Mark all as seen, which moves the divider to the top and clears every New at once; Undo puts it back. It is a watermark, not a read state on each row. The rows keep their height, so nothing shifts. The events are example data.
FAQ
How do I change the events and the last visit?
Edit EVENTS, newest first, and LAST_SEEN. Which events are new, the count and where the divider goes are derived from those times in rowsOf().
Why one divider and not a read state per row?
Because the question a person has is what happened since they were last here. One time answers it, and one press moves it. A per-row read state is a different block, the notification center.
What stays local in the demo, and how do I wire it for real?
The watermark is state in the page. To make it real, store the time on the server when the person leaves or presses the button, and load it as LAST_SEEN.