shadcn.io is not affiliated with official shadcn/ui
Centered Testimonial Card Grid Hero Block for Ark UI
A centred showcase hero with a headline, a Shine Button and an outline action over a wall of six customer quotes in cells that share their hairlines, a snap carousel on a phone.
Installation
Overview
A centred showcase hero that leads with a wall of social proof. A headline, a sentence, a Shine Button and an outline action sit at the top, and a band under them, with its own rule and + marks between the page's solid rails, holds six customer quotes in cells that share their hairlines: three across on a desktop and two on a tablet. Each cell is a short quote, its opening in the text colour and the rest muted, with the customer's initials avatar, name, role and company. On a phone the wall becomes a snap carousel with the next card showing, so the six quotes never stack into a long scroll. The cells fade up one after another on load. It's built from Shine Button, Button, Avatar and Guides, with CSS transitions only. The copy speaks for Ferryman, release management for engineering teams. For SaaS landing pages, B2B products and marketplaces where many different voices make the case better than one.
FAQ
How do I change the testimonials?
Edit TESTIMONIALS at the top of the file: each has a lead (the opening of the quote, in the text colour), an optional rest (muted), the customer's name, role, company and the initials shown in the avatar. The wall lays out as many as you give it; a multiple of three (or of two, if most visitors are on tablets) keeps the last row full. Keep quotes to one or two sentences: cells in a row stretch to the tallest, so one long quote makes its whole row taller.
How do I use customer photos instead of initials?
Add an AvatarImage with the photo's src inside each Avatar, before the AvatarFallback, and add the photo to each testimonial's data. The photo shows once it has loaded and the initials remain the fallback. Leave its alt empty: the name is right beside it, so a description would only repeat it.
How do screen readers read the wall?
The cells are a list named "What our customers say", so a screen reader announces six items before reading them. Each cell is a figure: the quote is a blockquote and the author's name, role and company are its figcaption. The initials avatars are hidden, since the name follows each one. The headline is the page's single h1. On a phone the list scrolls sideways and is a tab stop, so a keyboard user can focus it and move through the cards with the arrow keys.
How does the wall change across screen sizes?
It's a snap carousel on a phone, with each card 85% of the width so the next one shows as the cue to swipe; two columns from the md breakpoint and three from lg. The cells share one-pixel hairlines, so no edge is drawn twice, and the outer edges are the page's rails and the band's rule. The headline grows from text-4xl to text-6xl, and a long name or role wraps inside its cell instead of being cut off.
What animates, and what about reduced motion?
On first paint the headline, the sentence and the buttons fade up in turn, then the cells follow one after another, 70 milliseconds apart. It's CSS transitions on first paint, with no JavaScript, so the block is a server component. With reduced motion everything appears at once, and the Shine Button's light fades in instead of sweeping.
When should I use a wall instead of one featured testimonial?
Use a wall when the argument is breadth: many teams in different industries and roles getting value, which a visitor takes in at a glance without reading every quote. Use a single featured testimonial when one voice answers your buyers' biggest objection; in a wall that quote would be one cell among six.