shadcn.io is not affiliated with official shadcn/ui
Activity Proof Stacked Banner Block for Vue
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 Vue with Ark 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 takes asChild with the link inside, so it can be your router's link.