shadcn.io is not affiliated with official shadcn/ui
Centered CTA with Avatar Stack Button Block for React
A centred card-in-card call to action that follows your theme, whose single Shine Button carries the social proof: a stack of team avatars inside it, ahead of the label, with the trial terms on the shell.
Installation
Overview
A centred closing section for React with Base UI, built around one button. Between the page's solid rails, a muted shell with + marks on its corners holds a raised panel (a card with a soft shadow and a hairline ring). Instead of a row of faces, the Shine Button holds a stack of three team avatars at its start and the label "Join 2,400+ teams", so the proof sits on the thing people click. Above it are a headline and a short paragraph that leads with one measured claim; below the panel, on the shell, three short trial terms sit in a footer. The panel is light on a light page and dark on a dark one, and the button keeps the theme's own primary colour. The avatars are decorative initials, hidden from assistive technology, and the count lives in the label. The shell fades in once with CSS and stands still for visitors who ask for reduced motion. Made for sign-up and trial sections where one clear action beats a cluster of links.
FAQ
How do I change the count and the avatars?
Set TEAM_COUNT at the top of the file: the label prints it with a fixed Intl.NumberFormat("en-US") and a plus sign, so the server and the browser agree. TEAMS holds the initials shown in the stack; three fit a large button well. To use photos, put an AvatarImage with an empty alt before each fallback: the avatars are decoration, and the label already says who joined. The claim in the paragraph ("from 14 minutes to 3") is copy: change it to a number you can stand behind.
Is the avatar stack inside the button accessible?
Yes. The stack is aria-hidden, so the link's name is just its text, "Join 2,400+ teams", read once. The count is wrapped in bdi, which keeps "2,400+" in order in right-to-left languages. The section has one h2, and the terms under the panel are a plain list.
On Base UI, the button renders its link with render={<a href="#" />} and nativeButton={false}.
How does the panel work with the page's theme?
The panel never forces a scheme. It's a bg-card panel with a soft shadow and a hairline ring inside a bg-muted/50 shell, so every semantic token resolves to whatever the page is showing: light in a light theme, dark in a dark one. Nothing in it is a fixed color: change the preset and the button and the text follow.
What does the Shine Button do on hover?
A diagonal band of light sweeps across the button once when the pointer arrives, when it takes keyboard focus or when it's pressed. With reduced motion the light fades in where it stands instead. The light is the button's own pseudo-element, so the avatars and the label keep their places and the button doesn't resize or wrap down to 320px.
What happens with reduced motion?
The shell fades up once on load with a CSS transition. With reduced motion turned on, the transition is removed and everything is simply there.
When should I use this instead of the avatar band?
Use it when the page has exactly one action and you want its credibility next to it, as in a trial or sign-up band. Use the avatar social proof block when each person should be inspectable, or the dual-stat block when the proof is a pair of numbers rather than people.
Related
- Pro
Centered CTA with Avatar Social Proof
Social proofA 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
Centered CTA with Star and Fork Counts
Social proofA centered call to action that follows the page theme, with Star and Fork buttons that each join a link to its count, beside a contributor avatar stack.
- Pro
CTA with Orbit Ring Avatars
Social proofA split call to action on drafting lines: an invite for a private community beside a framed ring of member avatars that turns slowly while the section is hovered or holds focus.
- 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
Left-Aligned Social Proof Bar Hero
Logos and social proofA compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.
- Pro
Avatar Stack Side Rail Hero
Logos and social proofA compact hero for a community: a headline, a Shine Button and a second action beside a side rail of proof: a stack of member avatars over a line of social proof, then three stats in ruled rows.