shadcn.io is not affiliated with official shadcn/ui
Featured Testimonial Hero Block for React
A compact start-aligned hero with a headline, a Shine Button and an outline action over a closing band that holds one customer's quote, large, beside their rating, name, role and the number it is about.
Installation
Overview
A compact hero that lets one customer back up the pitch. A headline, a sentence, a Shine Button with an outline action and a line of trust copy sit at the start of the column; a closing band under them, between the page's solid rails with its own rule and + marks, holds the proof. In the band, a large quote runs across two thirds of the width, its first sentence in the text colour and the rest muted, and beside it, split by a hairline, sit five foreground stars, the author's avatar, name, role and company, and the number the quote is about: "3 weeks, from kickoff to launch". On a phone the quote comes first and the author block follows under a hairline. Everything fades up in turn on load. It's built from Shine Button, Button, Avatar and Guides with Lucide icons and CSS transitions only. The copy speaks for Keelson, a backend platform. For B2B SaaS landing pages and any product where one strong endorsement answers the visitor's first doubt.
FAQ
How do I change the quote and its author?
Edit TESTIMONIAL at the top of the file: the highlight (the quote's opening, in the text colour), the rest of the quote (muted), the author's name, role, company and initials, the rating out of 5 and the metric (a value and its label). One to three sentences read best at this size. Ask the customer before you quote them, and use their exact words; if there is no number to show, remove the block under the author.
How do I show the customer's photo instead of initials?
Add an AvatarImage with the photo's src inside the Avatar, before the AvatarFallback: the image shows once it has loaded, and the initials stay as the fallback if it fails. Leave its alt empty, since the name is written right beside it. Use a square photo of at least 80 pixels so it stays sharp on high-density screens.
How do screen readers read the testimonial?
The quote, the rating and the author are one figure: the words are a blockquote, and the stars, the name, the role and the number are its figcaption. The stars are hidden and a visually hidden sentence says "Rated 5 out of 5" instead; the initials avatar is hidden too, since the name follows it. The page's single h1 is the headline above, so the heading outline starts with the pitch.
How does it look on a phone?
The headline drops from text-6xl to text-4xl and the two buttons wrap onto two lines at the narrowest widths. The band becomes one column: the quote at text-xl, then a hairline, then the stars, the author and the number. The first screen holds the headline, the sentence and the buttons, with the band starting just below.
What animates, and what about reduced motion?
On first paint the headline, the sentence and the buttons fade and rise into place, then the band follows. It's all CSS transitions with no JavaScript, so the block is a server component. The Shine Button's light sweeps once when the pointer arrives; with reduced motion everything is in place at once and the light fades in where it stands.
When should I use a single testimonial instead of a grid?
Use a single quote when you have one endorsement that answers your buyers' biggest objection, from someone they'd recognise as like themselves: at this size it reads as a statement, not as decoration, and a number beside it makes it concrete. Use a grid when the point is breadth, many teams across industries and roles, where no single voice carries the argument.
Related
- Pro
Centered Testimonial Card Grid Hero
TestimonialsA 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.
- “Pro
Testimonials Rotating Hero
TestimonialsA reverse split hero with a card that shows one customer quote at a time in a hairline frame, a pause button and a dot per quote, beside an announcement pill, a headline, a Shine Button and an outline action.
- Pro
Split Layout Testimonial Card Hero
TestimonialsA split hero for month-end close software: the pitch, a Shine Button and an outline button beside a customer's five-star testimonial in a card in a card, with the two results it names.
- Pro
Centered Star Rating Hero
TestimonialsA showcase centered hero led by its review score, with five stars and the average, a Shine Button, review-site badges and three reviews below in cells whose hairlines overshoot their corners.
- 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.
- 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.