shadcn.io is not affiliated with official shadcn/ui
Avatar Stack Testimonials Block for Vue
A centred statement: one customer quote above a stack of team avatars that is a button, fanning open a roster of six teams in one hairline band, each with a name, a role and a one-line verdict.
Installation
Overview
A testimonials section that turns a count into people, for Vue with Ark UI. A centred header and a single customer quote lead the section (here a Gridwell customer, a design handoff tool), and beneath it a pill holds a stack of overlapping avatars with a "+4.9k" count and the words "Join 5,000+ teams". The pill is a button: press it and the stack spreads out while a roster opens beneath, a band that runs from rail to rail with plus marks on its corners and six short cells that share their lines, each with a quote, a name, a role and a company. Press it again to fold the roster away. The roster starts open, and the one Shine Button closes the section. It's built from Avatar Group, Collapsible, Button, Shine Button and Guides, with CSS transitions only and your theme's tokens. For landing and pricing pages that want broad social proof without a long wall of quotes.
FAQ
How do I change the people and the numbers?
Edit PEOPLE for the roster and TEAMS for the total, both at the top of the file. The stack shows every person in PEOPLE, and the "+4.9k" count is worked out as TEAMS minus the faces shown, rounded down, so the count and the "5,000+" in the label can't disagree. Set TEAMS to a number you can stand behind.
How do I start with the roster closed?
Remove defaultOpen from the Collapsible (React Aria's version calls it defaultExpanded). The stack and the quote then sit alone, and visitors press the pill to see the people.
How are the roster's lines drawn?
The roster is a grid with a one-pixel gap over your border colour and bg-background cells, so each line is drawn once, between two hairlines at its top and bottom. A Guides marks="corners" rules="none" sides={false} on the band puts a plus where each hairline meets the page's rails. Everything is decorative and takes your theme's colours.
How does it work with a keyboard and a screen reader?
The pill is one real button that announces whether the roster is open, and its name is its text, "Join 5,000+ teams, See what 6 of them say". The overlapping avatars are hidden from screen readers, since the roster names the same people in text. The roster is a named list, and each entry is a figure with a blockquote and a caption.
How does it fit a phone?
The stack keeps its first four faces so the pill fits at 320 pixels, and the roster is a single column of six cells with their hairlines. The whole section is about one and a half screens, and the Shine Button ends it.
Does it work in right-to-left languages?
Yes. The stack overlaps from the inline start, the count keeps its digits in order, the chevron turns the same way, and every quote sits in a bdi so its quotation marks stay in place.