Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Numbered Social Proof Banner Block for React

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.

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 numbered social proof banner for React with Base 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.

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

What happens in a right-to-left layout?

The cells follow the reading direction, the corner arrow moves to the other corner and flips, and each count sits in a bdi element so "42 merged" keeps its order.

How does it fit on a phone?

The three cells stack into rows of about 70 px, with the rank, the avatar and name, and the arrow in a line. Nothing scrolls sideways at 320 pixels.

  • Pro

    Numbered Announcements Banner

    Numbered lists

    A weekly digest band for a product-updates tool: a quiet title and count, then three numbered announcements on hairlines, each row one link with a trailing arrow.

  • Pro

    Activity Proof Stacked Banner

    Stacked cards

    A centred social-proof card for a team workspace: a line saying who and how many teams upgraded this week, with the count rolling up, a sentence, a ringed avatar stack and a Shine Button.

  • Pro

    Team Presence Live Banner

    Live status

    A presence callout for a team workspace: a live "4 of 5 teammates active" count over a band of five cells, each an initials avatar with an active or idle dot, a name and the document they are in.

  • Pro

    Stacked User Quote Banner

    Stacked cards

    A start-aligned post from a user of a UI kit, drawn like a social post with no network in it: avatar, name and handle, the quote, the post's age and a like button whose count rolls and rolls back.

  • Pro

    Centered CTA with Avatar Social Proof

    Social proof

    A centred statement for a community, closed by a band of six members on shared hairlines: each cell a link that opens a hover card with the member's role, status and join date, under one Shine Button.

  • Pro

    Numbered Changelog Banner

    Numbered lists

    A release banner for a release-management tool: the latest version set large at the start, and the three before it as a numbered list at the end, split by a solid divider.

All 100 banner blocks