shadcn.io is not affiliated with official shadcn/ui
Release Timeline Changelog Block for React
A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
Installation
Overview
A release timeline for React with Base UI, written for Wirebench, a fictional API client for teams. A start-aligned header carries the title, one sentence and a Subscribe link. Under it a band's rule meets a hairline rail at a + mark, and the rail runs down to the block's foot with a dot for each of the latest four releases: the newest filled, the others ringed. At the rail's start each release shows its version, the day it shipped and its type tags, each an outline badge with an icon and a word (New, Improved, Fixed, Deprecated, Security); at its end the title links to the release, with a short paragraph or a list of changes, and the newest carries a small greyscale drawing of what shipped. View all releases closes the list, so the block never turns into a long scroll. On a phone the rail moves to the start edge and the version, date and tags sit above each title. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Badge, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For product changelogs, docs sites and release hubs that want the latest work on one screen. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first. Each release has a version, a date as an ISO day ("2026-09-15"), an href to its own page, its kinds, a one-paragraph summary and an optional list of shorter changes. The date on screen ("Sep 15, 2026") is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser, and the time element keeps the machine-readable day. Dates are fixed, never computed from today. Keep it to three to five releases: older ones belong behind View all releases.
How are the change types told apart without colour?
Each type tag is an outline badge with an icon and the word, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon. The five kinds are constants at the top of the file (NEW, IMPROVED, FIXED, DEPRECATED, SECURITY), each an icon, an id and a label; add a kind by adding one more, and give a release as many as it needs.
Where do the links go?
Each release's title links to its own page (href). Subscribe and View all releases are links too (href="#"): point them at your feed or email sign-up and your full changelog. Subscribe is a Shine Button, the block's one primary action; View all releases is a ghost button.
Both buttons render the link they're given with render, with nativeButton={false}.
Can I put my own picture in the newest release?
Yes. The drawing is passed to the newest entry as its children, so swap the mock server window for your own drawing or a screenshot. The drawing here is decoration, hidden from assistive technology, because the summary beside it already says what shipped; if your picture carries information, give it a text alternative.
How does it fit on a phone and in a right-to-left layout?
Below lg the rail moves to the start edge and each release stacks its version, date and tags above the title, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the rail, its dots and the date column sit on the right, the arrow on View all releases turns, and the version numbers stay left to right.
Related
- Pro
Compact Timeline Changelog
Lists and timelinesThe last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.
- Pro
Release Notes Changelog
Spotlights and mediaOne release written as a long article behind a split divider, with a sticky contents list that marks the section on screen and turns into a row of chips on a phone.
- Pro
Milestone Markers Changelog
Lists and timelinesA centred rail for a build service: milestones are filled diamonds with their version, day and kind on one side and their title on the other, patches are small dots in a compact line, and a toggle shows milestones only or every release.
- Pro
Changelog Features
Timelines and stepsA release feed for a changelog tool that presents its features as release entries: a New, Improved and Fixed filter with counts, a version rail, and a collapsible What changed list on each.
- Pro
Changelog Summary About
TimelinesA release summary for a release-notes tool: a segmented bar of what changed since launch (added, improved, fixed) with counts, a filter by type and the latest four releases as rows.
- Pro
Changelog Hero
Updates and timelinesA compact centred hero for a build platform that ships weekly, over three release cells with hairlines that overshoot their corners.