A testimonial section is an evidence problem that everyone treats as a layout problem. The layout takes an hour. Whether the quotes read as evidence or as decoration is decided by four things that have nothing to do with CSS: who said it, what they say, whether the reader can verify it, and how many you show before it stops meaning anything.
110 public components on 21st carry the testimonials tag. The good news is that the layouts are largely solved. The rest of this is about the part components cannot do for you.
The wall
Many quotes at once, in columns, scrolling gently. Testimonials Columns by Efferd is the most-bookmarked testimonial section in the catalogue: an animated section where the quotes are arranged in columns that drift at different speeds.
The wall says "a lot of people" before it says anything specific, which is the right message when you have volume and no single famous name. It is the wrong one when you have three customers, because a sparse wall reads as an empty room.
The marquee
Testimonials with Marquee is the continuous horizontal version: a headline, a description, and auto-scrolling cards that pause on hover. Stagger Testimonials by vaib215 and Scroll Reel Testimonials by Syed Mohammad Ammar are the same instinct with different motion.
The pause on hover is not a nicety. A quote that moves away while someone is reading it is a quote nobody finishes, and the WCAG requirement for pausing moving content applies to this pattern directly.
The rotator
One quote at a time, with the reader or a timer moving between them. Animated Testimonials by Manu Arora, Circular Testimonials by Maxim Bortnikov and Profile Card Testimonial Carousel by Arunachalam are the versions of this shape.
Use it when you have a few strong quotes and want each one read. It inherits every carousel obligation: a pause control if it advances on its own, real buttons for the arrows, and no autoplay under reduced motion. The carousel guide covers the contract.
The single one
The most under-used layout: one quote, large, with a face and a name, and nothing else on the screen competing with it.
Testimonial-v2 by Awanish Verma, Unique Testimonial and Design Testimonial by Jatin Yadav are the components for it. If you have one quote from someone your reader has heard of, this beats a wall of forty from people they have not.
What makes a quote work
A name, a role and a company, or it is fiction. "Great product! - Sarah M." is worth less than nothing: it teaches the reader that the section is decorative and they can skip it. If someone will not be named, use the quote in a case study where the context does the work, or drop it.
A face that is the actual person. Stock photography beside a quote is the fastest way to lose a careful reader, and careful readers are the ones who buy.
A specific claim beats a warm one. "Cut our review time from two days to four hours" is evidence. "Amazing tool, highly recommend" is a mood. Ask for the number when you collect the quote, because you will not get it later.
A link out is the only real proof. A quote that links to the tweet, the post, the review or the person's profile can be checked. One checkable quote does more than ten unverifiable ones, and it is the difference between a testimonial section and a decoration.
Between three and six, usually. Enough to look real, few enough to be read. Past a dozen the reader stops reading and starts estimating, which is what a logo wall is for.
The structured-data question
Testimonials are the one marketing block with a documented markup trap in front of it. Search engines support Review and AggregateRating structured data, but self-serving reviews on your own site - reviews of your own product, collected and displayed by you - are explicitly excluded from rich-result eligibility. Marking up your testimonial wall as AggregateRating will not produce stars in search results, and misapplied review markup is a known cause of manual actions.
What does work: keep the quotes in real HTML with <blockquote> and <cite>, name the person and their organisation in text, and link out where you can. Answer engines reading the page do not need schema to see an attributed, verifiable claim, and they are the readers most likely to repeat it.
Where else to look
The honest list of alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | Card and Avatar underneath your own layout | No testimonial block; the composition is yours |
| Testimonial collection tools | Gathering video and text quotes with permission handled | A hosted widget, a script tag, and a look you do not control |
| Tailwind Plus | Conventional quote sections with the responsive states decided | Paid, and shared with every other site using it |
| 21st | Walls, marquees, rotators and single-quote layouts | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a testimonial section, get the previews inline, and let the agent write the file.
Browse testimonial components →
Frequently asked
- How many testimonials should a landing page show?
- Between three and six for most pages: enough to look real, few enough to be read. Past a dozen the reader stops reading and starts estimating, which is what a logo wall does better. One strong quote from someone they recognise beats forty from people they do not.
- What makes a testimonial credible?
- A full name, a role and a company; a photo of the actual person rather than stock; a specific claim with a number in it; and a link out to the tweet, post or profile so it can be checked. One verifiable quote is worth more than ten anonymous ones, because anonymity teaches the reader the section is decorative.
- Should testimonials use Review schema for star ratings?
- No. Reviews of your own product, collected and displayed by you, are excluded from rich-result eligibility, so AggregateRating markup on a testimonial wall will not produce stars and misapplied review markup is a known cause of manual actions. Use real blockquote and cite markup, name the person in text, and link out.
- Do auto-scrolling testimonials need a pause control?
- Yes. Content that moves automatically, lasts more than five seconds and sits beside other content needs a mechanism to pause it under WCAG 2.2.2. In practice that means pause on hover and on focus, and no autoplay at all under prefers-reduced-motion. A quote that scrolls away mid-sentence is a quote nobody finishes.