shadcn.io is not affiliated with official shadcn/ui
Maintainers Table Team Block for React
A table of an open-source project's six maintainers and contributors with their repositories, a twelve-week contribution strip and a button that opens their good first issues in place under the row.
Installation
Overview
An open-source team section for React with Base UI, written for Cromer, a fictional open-source job runner. A start-aligned header says "Cromer is built in the open" and counts its own sentence from the rows ("6 people, 4 of them maintainers, landed 358 commits in the last 12 weeks"), with a small drawn legend at its end. Under it a table runs from rail to rail and ends the block. Each row has the person (an initials avatar, a name, a Maintainer or Contributor badge and what they work on), the repositories they touch as chips, a twelve-week strip of cells in five steps of the foreground, the commits those weeks add up to, and a Good first issues button. The button opens that person's issues in place under the row: the first row starts open, and opening another folds it. On a phone the strip and the count move under the name and the repositories move into the opened panel. It is built from Avatar, Badge, Button's variants and Guides with your theme's tokens. The people, repositories and issues are made up for the example.
FAQ
How do I change the people, the weeks and the issues?
Edit PEOPLE at the top of the file. A person has a name, a role (Maintainer or Contributor), an area, their repositories, twelve weekly commit counts (oldest first) and their good first issues. The commit column, the header's sentence and the order of the rows are all counted from the weekly numbers (most commits first), so nothing else needs editing. Names, repositories and numbers are made up.
How is the strip drawn, and what does a screen reader hear?
Twelve small cells, one per week, each one of five solid steps of the foreground (none, 1 to 2, 3 to 5, 6 to 9, 10 or more commits), so no line shows through them. The strip is one image with a label that lists the weeks as numbers, oldest first, so the same data is read out. It is drawn left to right in every language, oldest week first, because it is a time series.
How do the good first issues open?
Each row's button has aria-expanded and aria-controls, and its name includes the person ("Good first issues from Amara Okafor"). The issues sit in a second row of the same table body. It folds to nothing and is unreachable (inert, hidden) until its button opens it, so keyboard and screen reader users never land inside a closed panel. With reduced motion it opens without the height transition. The issue links point to #: replace them with your tracker's URLs.
Why a plain table and not the catalog's Table?
The table needs a caption, column headers with scope and a second row that spans every column. A plain table gives all of that on every base, and it is the same markup on Base UI and on the others. The person's cell is the row header, so a screen reader announces the person with each cell.
How does it fit on a phone?
Below lg the Repositories, strip and Commits columns are dropped from view; the strip and the commit count are drawn again under the person's name, and the repositories are listed at the top of the opened panel. The button keeps only its icon and its screen-reader name. The strip's cells get smaller below sm, and nothing scrolls sideways at 320 pixels.
Related
- Pro
Contribution Graph Team
Projects and workloadA framed contribution graph of 26 weeks by seven days for a package registry, with avatar toggles to pick Everyone or one of four maintainers and a commit total that counts up once.
- Pro
Contributors Wall Team
Projects and workloadA wall of 24 contributors to a static-site generator in hairline cells, under a band of four totals (contributors, commits, pull requests and stars) added up from the data.
- Pro
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- 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
Awards Table Team
RecognitionA table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.
- Pro
Legend Filter Heatmap Stats
HeatmapsA twelve-week by seven-day commit heatmap whose five-step legend is a set of toggles: choosing a level keeps only those days at full strength, outlines the rest and counts the days.