shadcn.io is not affiliated with official shadcn/ui
Release Notes Timeline Block for React Aria
Eleven releases of a CLI on a rail spaced by the days between them, with diamond, dot and small-dot nodes for major, minor and patch, and an All or Minor and major switch that recomputes the gaps.
Installation
Overview
See how often a product ships with this release-notes timeline for React with React Aria. It is written for Pacemark, a fictional release-cadence tracker, and shows the Pacemark CLI. A hairline frame with a plus mark on each corner holds eleven releases, newest first, on a rail where the space between two releases is the number of days between them, scaled with a floor and a ceiling, and the key says so. The node is the kind of release: a diamond for a major, a dot for a minor, a small dot for a patch. Each row is a version in monospace, its kind, its date and the gap to the one before it. Above the rail, three figures are worked out from what is shown: the median gap, the longest gap and releases per quarter. A switch, "All releases / Minor and major", takes the patches off, recomputes every gap and respaces the rail; the other view is drawn unseen in the same place, so the panel keeps its height. It is built from ToggleGroup and Guides with CSS for the spacing. For libraries, apps and any product with a version history. It is not a changelog: there are no notes, only the rhythm. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first: a version, a kind ("major", "minor" or "patch") and the ISO day on. The gaps, the figures and the spacing are derived from the dates.
How is the spacing scaled?
Each row has a minimum height that is its gap in days times a small step, clamped between a floor and a ceiling (min-h-[clamp(…)] on the row). A row only sets a CSS variable, --days, from daysOf(). Change the step or the limits in that one class to make the rail tighter or looser.
How are the figures worked out?
gapList() gives the days between each shown release and the one before it. The median of those is the first figure (an even count rounds the average of the middle two), the largest is the second, and releases per quarter is the shown count over the span from the oldest to the newest, in 91-day quarters. Switching the view recomputes all three.
What stays in the page?
Only the chosen view. Nothing is saved or sent. To make it real, build RELEASES from your tags or your registry's version list.
Is it accessible?
The kind of release is written next to every version, so the node shape is never the only signal. The switch is a group of toggle buttons labelled "Show", the hidden view is removed from the tab order and from assistive technology, and the foot is a polite status line that says how many releases are shown and the median and longest gap.