Changelog Hero Block for React

Edit RELEASES at the top of the file. Each release has a version, a kind, a when, a title and a description; the first one is the newest and gets the filled dot, and a screen reader hears "(latest)" after its title. kind is feature, improvement or fix, and KIND_LABELS turns it into the badge's word. Three cells fill the row from md; for a fourth, change md:grid-cols-3 to md:grid-cols-4.

So the demo never looks stale: "2 days ago" reads as recent whenever the page is opened, where a fixed date ages. With real releases, show real dates: put them in a time element with its dateTime, such as <time dateTime="2026-10-09">Oct 9</time>, or compute the relative label from that date when the page renders.

The section is the page's spine: two solid side rails and a top rule that runs to the viewport edges, with + marks where it meets the rails, so the hero joins the blocks above and below it. Each release cell is relative and carries its own Guides with extend="md" and marks="start", so its box overshoots the corners; the cells sit gap-6 apart so neighbouring overshoots never touch. No line is dashed or inset.

Yes. The releases are an ordered list named "Recent releases", so screen readers announce three items in order, and each title is a heading under the page's h1. The kind is a word, not only a colour or a dot; the dots and lines are hidden from assistive tech. Versions sit in bdi, so they read the same in a right-to-left page, and with reduced motion nothing fades in.

The headline steps down from text-6xl to text-4xl and the buttons wrap when they don't fit side by side, so the Shine Button sits on the first screen. Below md the three cells stack, one under the other, and the pill's text truncates rather than overflowing.

Use this one when shipping often is the message itself: the releases are part of a centred hero, as three cells under one headline. Use Changelog Preview when you want a split hero, a headline and calls to action on one side, with a ruled ledger of releases beside them as supporting evidence.