shadcn.io is not affiliated with official shadcn/ui
Open Source Changelog Block for React Aria
An open-source project changelog as a split: the project at the start with a licence badge, stars, forks, contributors and a contributor stack, and the latest four releases at the end, each with its install command.
Installation
Overview
An open-source changelog for React with React Aria, written for Openhearth, a fictional forms library. A split divider that reaches the top rule separates the two halves. At the start, the project: its name as the title, a licence badge, a row of three facts (stars, forks, contributors, each counted up once) and a stack of contributor initials with the rest counted. At the end, the latest four releases as an ordered list of rows between hairlines, each with its version, the day it shipped, a type tag, a linked title, three short notes and the command that installs that version as inline code. View all releases ends the list. On a phone the project comes first and a rule separates the two parts. It's built from Guides, Avatar, Badge, Counting Number and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For library docs, project landing pages and release hubs. The figures and releases are example data, with no live counts.
FAQ
How do I change the project and its releases?
Edit FACTS (each a label, an icon and a value), FACES (the initials of the contributors you show) and RELEASES, newest first, at the top of the file. A release has a version, an ISO date, its kinds, a title, an href and a short list of changes. The install command is built from the version by installOf, so change the package name there once.
Can the counts be live?
The numbers here are typed. For live ones, fetch them on your server (a repository's stars, forks and contributors come from its hosting service's API, which is rate limited) and pass them in as the value of each fact; each counts up once when the page shows it.
Why is the install command inline code and not a Copy button?
It is a short line you read beside the release, so it stays inline code in a left-to-right box. If you want a copy button, the Copy Button component drops in next to it.
Where do the links go?
Each release title links to its own page (href) and View all releases is a link too (href="#"): point it at your full changelog.
The button renders a link when it has an href.
How does it fit on a phone and in a right-to-left layout?
Below lg the project sits above the releases with a rule between them, the three facts stack one per row and each release puts its version and day above its notes, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the divider and rows mirror, and versions, counts and commands stay left to right.