shadcn.io is not affiliated with official shadcn/ui
Open Source Changelog Block for React
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 Base UI, 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 the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Community Contributions Changelog
ContributorsFour merged pull requests as cells with the title, number, author, a First contribution badge, the merge day and a drawn diffstat, under a header counted from all fourteen.
- Pro
Contributor Stats Changelog
ContributorsOne segmented share bar of a release's commits by contributor with a counted legend, over the three most recent changelog entries each credited with an avatar and name.
- Pro
Release Page Changelog
Spotlights and mediaA release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.
- Pro
Contributor Leaderboard Changelog
ContributorsA framed, sortable table of eight contributors with rank by impact, commits, reviews, an impact bar and a streak; the top three keep a ringed avatar and the headings are buttons that set aria-sort.
- 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
Release Timeline Changelog
Lists and timelinesA 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.