shadcn.io is not affiliated with official shadcn/ui
Contributor Stats Changelog Block for Radix UI
One 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.
Installation
Overview
A contributor-stats changelog for React with Radix UI, written for Crewcount, a fictional team-metrics app. A header whose sentence is counted from the typed commits sits over a framed segmented bar of v3.6.0's 250 commits by contributor. The segments grow in proportion to the commits, with 2 px gaps, and step down in weight (100, 60, 35 and 15 per cent of the foreground; the lightest is outlined). A legend of Data List items under the bar gives each contributor's commits and share, the shares worked out by largest remainder so they add to 100, in two columns on a phone. Below, in a band, the three most recent entries are each credited with the author's initials and name. It's built from Guides, Avatar and Data List, with CSS transitions for the entrance. For team dashboards and release notes that credit the people. The people and counts are example data.
FAQ
How do I change the contributors and the entries?
Edit CONTRIBUTORS (a name and a commit count) and ENTRIES at the top of the file. The total, each segment's length, the legend and the header's sentence come from the counts. The shares are rounded by largest remainder, so four rounded numbers never add to 99 or 101.
Why is the bar hidden from screen readers?
The legend under it lists every contributor, their commits and their share, so the bar would only repeat it. The segments differ by weight and the lightest has an outline, so the bar also reads in greyscale; the legend's swatches match.
Why no colours?
Segments use the foreground at four weights over the page, so the bar follows your theme and works in light and dark without picking hues.