shadcn.io is not affiliated with official shadcn/ui
Numbered Social Proof Banner Block for Radix UI
A leaderboard banner for an open-source tool: the top three contributors this week as a framed, ranked list on shared hairlines, each cell one link with an initials avatar and a merged count.
Installation
Overview
A numbered social proof banner for React with Radix UI, for showing the people behind a project. A title and a line sit above a framed ordered list, its corners marked with + crossings, of the three top contributors this week on shared hairlines. Each cell holds the rank in large mono, an initials avatar, the name and the number of pull requests merged; the first place is set in medium weight, and the whole cell is one link to the person's page. On a phone the cells become three rows. It's built from Avatar, Link Overlay and Guides, and it follows your theme.
FAQ
How do I change the contributors?
Edit CONTRIBUTORS, ranked most first: each entry has a name, initials, a merged count and an href. The rank is the position in the array, so sort it before you render it; nothing in the block re-sorts.
Can I use real photos?
Yes. Add an AvatarImage with the person's src before the AvatarFallback; the initials show until the image loads and if it fails. Give the image an empty alt, since the name is right beside it.
How is the whole cell a link?
The name is a link that Link Overlay stretches over the cell, so the cell is one tab stop and one touch target. It tints on hover and rings on keyboard focus. The arrow at the corner is decoration.
Are the ranks exposed to screen readers?
The cells are an ordered list, so order is exposed as list position; the large numerals are decoration and hidden, so they are not read twice. The count reads "42 merged".