shadcn.io is not affiliated with official shadcn/ui
Contributor Stats Changelog Block for React
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 Base 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.
Related
- 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
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
AI Commit Analyzer Changelog
Code and commitsA release's commits as one segmented bar by category with counts and shares, over a table of the five highest-impact commits with an impact meter, a risk word and a How it's scored popover.
- Pro
Author Grouped Changelog
ContributorsThe twelve changes of one code-review tool's release regrouped by a toggle: by author, each cell a person with their changes and a type tag each; by type, each cell a kind of change with who made it.
- Pro
Commit Frequency Heatmap Changelog
Code and commitsA seven by twelve commit grid with the releases flagged above the weeks, a count in every cell, a keyboard-reachable readout and a sentence worked out from the data.
- 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.