shadcn.io is not affiliated with official shadcn/ui
Changelog Preview Hero Block for React
A split hero for a code editor that releases on a schedule: the headline on one side, a ruled ledger of the four latest releases across a divider.
Installation
Overview
A split hero that backs up a promise to keep improving. On the start side, an announcement link, a bold headline, a subtitle and two calls to action (a Shine Button and an outline Button); across a solid divider with + marks where it meets the top rule, a ledger of the four latest releases. The ledger is a header band, "Recent releases", whose rule carries + marks, and four rows separated by hairlines that stretch to fill the column's full height: each row has the version in monospace, its kind, its age, a title and one line about the change, with the newest marked "Latest". It's written for Plover, a made-up code editor. It's built from Announcement, Badge, Guides, Shine Button, Button and Status, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, SaaS products and any landing page where frequent releases are an advantage.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first. Each release has a version, a kind (feature, improvement or fix, which KIND_LABELS turns into New, Improved or Fixed), a when, a title and a description. The first release gets the "Latest" badge. The rows share the column's height equally, so four fit the copy beside them; more rows make the whole hero taller.
Why do the releases say how long ago, instead of dates?
So the demo never contradicts itself or ages: a fixed date next to "3 days ago" is wrong a week later. With your real releases, show real dates in time elements with their dateTime, or compute the age from each release's date when the page renders.
How do I fill the ledger from my changelog?
Load the latest releases where your page loads its data, from your CMS, your GitHub releases or a changelog file, map them to the same fields, and keep the four newest. Point Full changelog at your changelog page.
Is the ledger accessible?
Yes. Its title is an h2 under the page's h1, each release's title is an h3, and the releases are an ordered list, newest first. The kind is a word in a badge, never only a colour. The announcement is a link, and with reduced motion nothing fades in.
How does it fit on a phone?
Below the lg breakpoint the two halves stack: the copy first, with the Shine Button on the first screen, then the ledger under a single rule instead of the vertical divider. The headline steps down from text-6xl to text-4xl, the buttons wrap when they don't fit side by side, and the badges in each row wrap onto a second line if they must.
When should I use this instead of the Changelog hero?
Use this split layout when your main message is the product and the releases are evidence beside it. Use the Changelog hero when shipping often is the message: its three release cells sit under a single centred headline, as the hero's main content.
Related
- 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.
- 123Pro
Centered Version Switcher Hero
Interactive demosA compact centred hero whose version tabs swap the headline, the subtitle and three what's-new cells for each major release of a rules engine.
- Pro
Split Layout Commit Graph Hero
Code and terminalA reverse split hero for a code host: a commit history drawn as a branch graph in a hairline frame on the start side, then an announcement link, the headline, a Shine Button and three ticks.
- Pro
Centered Activity Feed Hero
Stats and live dataA split hero with a live pill, a headline and two actions beside a ruled feed of recent activity, each row with an avatar, a name, an action and how long ago.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.
- Pro
Reverse Split News List Hero
Updates and timelinesA reverse split hero on drafting lines for a team docs workspace: a greyscale product illustration beside an announcement pill, the headline, a ruled list of the latest updates as links, a Shine Button and a second action.