shadcn.io is not affiliated with official shadcn/ui
Timeline Grouped By Date Block for Radix UI
A sales call log of eighteen calls under four sticky day heads that fold open or closed and add up their calls, with a Jump to a date popover where only days with calls can be pressed.
Installation
Overview
Group a long record under days that stay in view with this timeline grouped by date for React with Radix UI. It is written for Tallyday, a fictional sales CRM. A hairline frame with a plus mark on each corner holds a scroll region of fixed height with four day heads ("Today, Wed 14 Oct", "Tue 13 Oct", "Mon 12 Oct", "Fri 9 Oct"). Each head is a heading that holds a Collapsible trigger: it says how many calls the day had and how long they took ("5 calls, 46 min", worked out from the calls) and folds the day open or closed. The head sticks to the top of the region while its calls scroll under it. Each call is a round tile for its outcome (connected, voicemail, no answer), the account, a badge, the topic, the time and the minutes. "Jump to a date" opens a Popover with October 2026 as a month: only days with calls can be pressed, and choosing one opens that day and scrolls the region to it. A polite status line says what opened. For call logs, shift reports and any history read by the day. The calls are example data.
FAQ
How do I change the calls?
Edit LOG at the top of the file. Each day has an ISO date and its calls as lines of clock|minutes|outcome|account|topic, with the outcome one of c (connected), v (voicemail) or m (no answer). The day totals, the call counts and the month grid are derived from them. TODAY is the date that gets the word "Today"; change MONTH_ROWS if your calls fall in another month.
How do the sticky heads work?
Each head is positioned sticky at the top of the scroll region and stays inside its own day, so the next day's head pushes it out as you scroll. Folding a day removes its calls from view and from the keyboard order, and the head stays where it was.
How does Jump to a date work?
The month is a table of buttons for the days with calls and plain numbers for the others, so there is nothing to tab through that does nothing. Choosing a day opens it if it was folded, closes the popover and scrolls the region, not the page, to that day's head. Nothing scrolls on load.
What stays in the page, and how do I use a real log?
Everything: which days are open is local state and no request is made. To use your own log, map your calls to the same fields and group them by date. For a long log, load a few days at a time and keep the heads and the jump here.
Is it accessible?
Each day head is a real heading around a button with aria-expanded, and a folded day is hidden from the keyboard and from screen readers. The region can be reached with the keyboard. Every day button in the month is named with its date and its number of calls, and the status line is a polite live region present from load.