Centered Version Switcher Hero Block for React

Edit VERSIONS at the top of the file. Each version has an id, the tab's label, the headline's two lines (headline, then the muted highlight), a subtitle and its changes, the three entries of the "What's new" cells. Add or remove versions and the tabs follow. isCurrent: true puts the New badge on that version's tab. The tab that opens first is the Tabs' defaultValue, the current release's id.

The headlines and lists aren't the same length, so each version would make the hero a different height and push the page below it up or down. Behind the visible version, every version's copy, buttons and cells sit invisibly in the same grid cells and are hidden from assistive tech: the longest one sets each row's height, at every screen width, and a shorter version is centred in the space. The tabs, the buttons and the cells stay in place.

Yes. It's a real tab list named "Product version": the arrow keys move between versions, and each tab controls its own panel. The panel holds the page's h1, and only the selected version's panel is in the page, so there's always one headline. The New badge is part of the third tab's name, the cells are a list named "What's new in v3", and the plus icons are hidden from screen readers. With reduced motion, the copy changes without fading.

Yes: make the tabs controlled and set the version from your route, for example a ?version=v2 query. Pass Tabs a value and an onValueChange, which receives the new value.

The headline steps down from text-5xl to text-4xl and wraps where it must, the buttons wrap onto a second line when they don't fit side by side, and the three short tab labels stay on one line. The three cells stack, one under another, at the column's width, so the button is on the first screen.

Use a version switcher when your releases differ enough that contrasting them sells the latest one, such as a move from a CLI tool to a visual builder. Use a static headline when only the current release matters, or when your history is better told on a changelog page; the Changelog hero puts recent releases under a single headline.