Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Contributors Wall Team Block for React

A 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A contributors wall for React with Base UI, written for Brinkley, a fictional static-site generator. A centred header says how many people write it, a band of four totals follows (contributors, commits, pull requests and stars), and under it a wall of the 24 contributors, most commits first, in cells that share their hairlines and run from rail to rail, so the wall ends the block. Each cell has an initials avatar in one of three greyscale tones, the name, the commits and pull requests, and a thin bar for the commits against the busiest contributor. Eight columns from lg, six from md, four from sm; a phone has three, shows twelve and a Show all 24 button. Every total is added up from the typed data. It is built from Avatar, Button and Guides with your theme's tokens. The people and numbers are made up for the example.

FAQ

How do I change the contributors and the totals?

Edit CONTRIBUTORS (a name, commits and pull requests) and REPOS (a name and stars) at the top of the file. The first three totals, the header's count and the bars are worked out from the list; stars are the sum of the repositories, shown in a compact form ("12.9K"). Keep the list in most-commits-first order, since the bar lengths are measured against the first.

Why does it show 24 cells and why those columns?

Twenty-four divides evenly into three, four, six and eight columns, so the wall has no short last row at any width. The cells share their hairlines through a one-pixel gap over a border-coloured background, so every line is exactly one pixel and the wall closes against the rails.

How does it fit on a phone?

Below sm the wall is three columns and shows twelve people, then a Show all 24 button in a band under it. The button is a disclosure: it says whether the list is expanded and which list it controls, and its label stays the same. "Pull requests" is written "PRs" in the narrow cells and read in full by screen readers. The four totals sit in a two-by-two grid.

What does the bar in each cell mean?

The contributor's commits as a share of the busiest contributor's, drawn as a solid line over a pale track. It repeats the numbers in the cell, so assistive technology skips it.

Does it work right to left?

Yes. The cells and the totals follow the page direction, every number is wrapped in bdi, and the bars grow from the start edge.

  • Pro

    Maintainers Table Team

    Projects and workload

    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.

  • Pro

    Contribution Graph Team

    Projects and workload

    A 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

    Contact Grid Team

    Grids and walls

    Six people of a legal-intake service in cells that stand apart, each an initials avatar with a presence dot and the same state in words, a role, an address and an outline Copy email button that copies it and confirms in place.

  • Pro

    Contributor Leaderboard Changelog

    Contributors

    A 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 Growth Chart About

    Numbers

    A community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.

  • Pro

    Score Bar Leaderboard Stats

    Leaderboards

    Seven quiz players in a band that runs from rail to rail, each row a name, a context line, the points and a thin bar measured against the leader's score.

All 126 team blocks