Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Avatar Stack Testimonials Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A testimonials section that turns a count into people, for React with Base 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.

What happens with reduced motion?

The section fades up once on load, the avatars slide apart when the roster opens, and the roster opens with a short height transition. With reduced motion all three are skipped and everything changes at once.

  • Pro

    Expandable Profile Testimonials

    Expand, flip, pin

    Three customer cells that expand in place into a profile, each a hairline box with a + mark, under a compact header with a Shine Button: a two-line quote when closed, the whole quote plus industry, team size, plan and time as a customer when open.

  • Pro

    Testimonials Speaker Switcher

    Logos and faces

    A band of avatar-and-name chips for five customers: choose one and the large quote in a raised card in a card below changes to theirs, with arrow-key control between the chips, one scrolling row on phones, and a polite announcement of the change.

  • Pro

    Testimonials Portrait Carousel

    Carousels and decks

    Customer stories for a site builder on slides in one hairline band: each pairs a framed portrait, a monogram on a grid with the result the customer got, with the quote, split by a divider, and a footer row with a 01 / 04 count and previous and next buttons, under a header with one Shine Button.

  • Pro

    Centered CTA with Avatar Social Proof

    Social proof

    A 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 Avatar Stack Button

    Social proof

    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.

  • Pro

    Avatar Stack Side Rail Hero

    Logos and social proof

    A 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.

All 100 testimonials blocks