shadcn.io is not affiliated with official shadcn/ui
Tabbed Timeline Block for React
Twenty customer calls, emails and demos regrouped by Day, Week and Month tabs from one fixed date, with each node showing its count and its largest account, and a panel that keeps the height of the tallest zoom.
Installation
Overview
Zoom the same events in and out with this tabbed timeline for React with Base UI. It is written for Zoomlog, a fictional customer-success log. A hairline frame with a plus mark on each corner holds a line of Tabs — Day, Week and Month — over one panel. Day lists the events of Wed 14 Oct hour by hour, each node with its icon, its title, its kind and whether it is Done or Booked. Week has one node per working day with the number of events in its circle and its largest account. Month has one node per week of October with the same. All three come from one list of twenty calls, emails and demos through one helper, measured from one fixed "now". The panel holds the height of the tallest zoom, so changing tabs moves nothing below it, and a polite status line announces the zoom and its count. For activity logs, CRMs, calendars and any record that reads differently at different distances. The events are example data.
FAQ
How do I change the events?
Edit CONTACTS at the top of the file. Each has an id, an ISO at day and time, a kind (CALL, EMAIL or DEMO), an account, a title and a size in thousands, which decides the largest account shown on a node. The three zooms are built by dayNodes, weekNodes and monthNodes from AS_OF; change that one constant and the day, the week and the month all move.
Why does the panel not change height?
Each tab's panel has an unseen copy in the same grid cell, so the cell is as tall as the tallest zoom and the live panel sits at its top. The copies are hidden from assistive technology and cannot take focus.
What do Done and Booked mean?
An event at or before the fixed "now" (Wed 14 Oct, 09:30) is Done and a later one is Booked. The word is in the text, not only the node. Replace AS_OF with your own clock when you wire it up.
What stays in the page?
The chosen zoom. Nothing is saved. To keep the zoom between visits, store the tab value with the person's other preferences and read it back into the initial state.
Is it accessible?
The zoom is a real tab list: the arrow keys move between the three tabs and each panel is labelled by its tab. Each panel starts with a heading that says the range and the count. The status line is a polite live region that is there from load. The kind of a contact is a word as well as an icon.