shadcn.io is not affiliated with official shadcn/ui
Activity Proof Stacked Banner Block for React
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.
Installation
Overview
A social-proof banner for React with Base UI, for a plan page or an upgrade prompt. A centred card framed by + marks on its corners holds one line, "Sarah K. and 141 others upgraded this week", where the 141 is a rolling number that counts up once when the card scrolls into view; a sentence about what the upgrade adds; and a foot row with a ringed stack of five avatars beside one Shine Button. The avatars are initials, with no images to load, and they sit beside the button, not inside it. It's built from Avatar, Sliding Number, Shine Button and Guides, with your theme's tokens for every colour. For upgrade nudges, plan pages and any claim that other people did it too.
FAQ
Where does the 141 come from?
OTHERS at the top of the file: replace it with a number from your own data, rendered on the server or fetched. The block never fakes a live count: the number rolls up from zero once, when it scrolls into view, and stays put. Screen readers hear the final number, "Sarah K. and 141 others upgraded this week", not the digits rolling.
What moves, and what happens with reduced motion?
The card fades up once on load and the number rolls up once when visible. With reduced motion the fade is off and the digits change in place.
Can I use photos for the avatars?
Yes: add an Avatar image to each avatar and keep the initials as the fallback. The stack is decoration (aria-hidden), because the line already says who upgraded, so the images need no alt text. The ring around each avatar is the card colour, so the overlaps look the same in light and dark.
Where does the button go?
See upgrade options is a link (href="#"): point it at your plans page.
It renders the link it's given with render, with nativeButton={false}.
Related
- 123Pro
Numbered Social Proof Banner
Numbered listsA 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.
- Pro
Team Presence Live Banner
Live statusA 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 Testimonial Banner
Stacked cardsA single customer quote for a block library: a quote mark, the quote in medium weight, an initials avatar with name and role, and a tinted band with the result in numbers and a case-study link.
- Pro
Centered Stacked Banner
Stacked cardsA centred bonus offer for a music-learning app: a gift tile, a Limited time badge, a heading, a strip of fifteen month cells with the last three outlined as free, and a Shine Button.
- Pro
Light Split CTA with Ranked Avatar List
Social proofA reverse split call to action: a leaderboard at the start with the top three ranked, avatars and counts on shared hairlines and the visitor's own row pinned underneath, beside the headline and the Shine Button.
- Pro
With Rating Testimonials
Collect a reviewOne large customer quote over a closing band you can rate in: choose stars and the average and the rating count change on the spot, with a note that nothing is saved.