shadcn.io is not affiliated with official shadcn/ui
Centered CTA with Avatar Stack Button Block for Ark UI
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 Ark 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.
The button renders its a through asChild, so the button's styles land on the link.
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.