shadcn.io is not affiliated with official shadcn/ui
Open Source Contributor Profile Block for React Aria
A contributor profile with a stacked language bar whose segments filter a table of seven repositories by role, stars and last release, a sort menu and a Sponsor button that says it is not connected.
Installation
Overview
Show what a maintainer looks after with this open-source contributor profile for React with React Aria. A compact header holds the title, one sentence and a menu that sorts by stars or by last release. The frame under it opens on the person with an outline Sponsor Button, then a stacked bar that splits the repositories by language: each segment is a button in a single-choice Toggle Group, sized by its repository count, with a legend of counts and shares that add up to 100. Press a segment to filter the table, press it again to show everything. The table lists each repository with a role Badge (Core, Maintainer or Reviewer), language, stars in compact notation and the date of its last release, and keeps seven lines of height so filtering never moves the panel. On a phone the columns fold into the first cell. It's built from Toggle Group, a native table, Native Select, Badge, Button, Avatar and Guides, with a CSS entrance only. For a code host, a maintainer page or any profile with a portfolio of projects.
FAQ
How do I list my own repositories?
Edit REPOS (name, language, role, stars, last release) and LANGUAGES with the matching two-letter codes in CODES. The segment widths, the legend counts and the shares are worked out from the repositories; the shares use the largest-remainder method so they always total 100.
How does the language filter work?
The bar is a single-choice toggle group that may be empty. Pressing a segment keeps only that language in the table, pressing the pressed segment clears the filter. The status line spells out the result, such as TypeScript, by stars: 3 of 7.
What does Sponsor do?
Nothing leaves the page: the status line says that sponsoring isn't set up here. In a real app link the button to your sponsorship page or open your checkout from its handler.
How are the rows sorted?
By stars, highest first, or by the date of the last release, newest first. Dates are typed ISO days shown in a time element, never computed from the clock.