Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Three Column Testimonials Block for React

Three customer quotes with no card chrome: a centred header over one closing band of three columns, each a large initials avatar over a centred quote, divided by hairlines.

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 people-first testimonials section for React with Base UI. A centred header ("What changed when the interface stopped being a project", with a bold lead and a muted sentence about a fictional component kit, Heronkit) sits above one closing band, drawn from the page's rails with a top rule and plus marks on them. In the band, three columns stand side by side, each led by a large initials avatar, with the quote centred beneath it, its first sentence in the text colour and the rest muted, and the author's name and role at the foot. There are no cards: hairlines between the columns do the separating, and they turn horizontal when the columns stack into rows. It's built from Avatar and Guides, with CSS transitions only and your theme's tokens, and it has no button, so there's no primary colour in it. For landing pages, pricing pages and the foot of a feature tour, where three short voices should read as one calm band.

FAQ

How do I change the quotes?

Edit the TESTIMONIALS array at the top of the file: a name, role, company, initials, a lead (the first sentence, set in the text colour) and the rest of the quote. Keep each quote to two sentences or fewer so the three columns stay about the same height. Use real words from real customers, with their permission.

How do the columns behave at each width?

At lg and up there are three columns with a vertical hairline between them. Below lg the quotes stack as rows with a horizontal hairline between them, each centred in a column about 28rem wide. The dividers are logical, so they flip in right-to-left languages.

How are the lines drawn?

Guides bleed marks="top" rules="top" on the page column draws the two rails and a top rule that runs to the page's edges. The band under the header has its own Guides marks="top" rules="top" sides={false}, so its rule and plus marks land on the rails, and the block ends there without a bottom rule: the next section draws its own top rule, so a stack never doubles a line.

How do I use photos instead of initials?

Add an AvatarImage with the photo's src and an empty alt inside each Avatar, before the AvatarFallback. The initials stay as the fallback while the photo loads. The name is already written under each quote, so the picture is decoration.

How do screen readers read it?

The heading is the section's h2. The quotes are a list named "Customer quotes", and each is a figure with a blockquote and a figcaption for the name and role. The avatar is hidden from screen readers, since the name is written beside it.

Does it work in right-to-left languages?

Yes. The quote is wrapped in a bdi, so its quotation marks stay at the ends of the sentence, and the hairlines and the order of the columns follow the reading direction.

  • Pro

    Two Column Testimonials

    Rows and lists

    A testimonials section split by a solid divider: a pinned intro column with the heading and a Shine Button beside five customer quotes set as ruled rows, the first one larger.

  • Pro

    Duo Testimonials

    Results and figures

    Two customer quotes from two different segments in one ruled band, split by a column that states the verdict they share as one big figure derived from both of their numbers, under a compact header with a Shine Button.

  • Pro

    Mini Cards Testimonials

    Quote grids

    Eight square tiles in a hairline grid, each holding a one-line customer quote at the top and its author at the foot, with the one Shine Button in the header row.

  • Pro

    Cards Testimonials

    Quote grids

    Three customer quotes for an invoicing app in cells apart on hairline frames with + marks, each led by its result, with the middle one raised and a header that carries the rating and one Shine Button.

  • Pro

    Centered Testimonial Card Grid Hero

    Testimonials

    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.

  • Pro

    Bento Grid Testimonials

    Quote grids

    A quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.

All 100 testimonials blocks