Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Truncated Testimonials Block for React

Four customer quotes in a two-column grid, each cut to three lines with a Read more button that lifts the cut and turns into Show less.

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 grid that keeps its cells even when the quotes are long, for React with Base UI. A compact header ("Read the full stories", with a bold lead about four migrations to Brindle, a fictional component kit) sits above one closing band drawn from the page's rails, with a top rule and plus marks on them. In the band, four customers fill a two-by-two grid of cells that share their hairlines, each quote cut to three lines so every row lines up. A "Read more" button under each one lifts the cut, the label turns into "Show less", and the button's chevron turns over. Each cell opens independently of the others. It's built from Avatar, Button and Guides, with Lucide's chevron, CSS transitions only and your theme's tokens; the buttons are ghost, so there's no primary colour in it. For landing pages with several detailed quotes, and for any grid where a single long story would otherwise stretch its whole row.

FAQ

How do I change the quotes and the number of lines shown?

Edit the STORIES array at the top of the file for the quotes. The cut is the line-clamp-3 class on the quote's paragraph: change it to line-clamp-2, line-clamp-4 or any other count, and keep your quotes longer than that so "Read more" always has something to show.

What happens to a quote that is shorter than three lines?

Its button is still there, but there is nothing to lift, so pressing it only swaps the label. The block never measures the text to hide the button, because a measurement would shift the layout after load and differ between server and browser. If some of your quotes are short, remove the button for those entries.

How does it work with a keyboard and a screen reader?

The button is a real button that announces whether the quote is expanded, and its name ends with the speaker ("Read more, Noor Haddad's quote") so four identical labels are told apart. The cut is only visual: the full quote is always in the page, so screen readers read all of it whether the cell is open or not.

Why does opening one cell stretch the cell beside it?

The grid gives both cells in a row the same height, so the quotes, buttons and captions line up. When one cell opens, its row gets taller and the neighbour grows with it, with its caption staying at the bottom. The cells share their hairlines (gap-px over the border colour), so the neighbour's background fills the extra height and no line breaks.

Does it work in right-to-left languages?

Yes. The button sits on the inline start edge, the layout uses logical sides, and each quote is in a bdi so its quotation marks stay at the ends of the sentence.

What happens with reduced motion?

The section fades up once on load and the chevron turns with a short transition. With reduced motion both are skipped, and the quote opens and closes at once, as it does for everyone.

  • Pro

    Accordion Testimonials

    Rows and lists

    Customer stories as accordion rows beside a side header, on the page's drafting lines: each row shows the person, a one-line summary and a rating, and opens one at a time to read the full quote.

  • 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

    Detailed Reviews Testimonials

    Ratings and reviews

    Three long reviews of a bookkeeping app beside a rail of proof: the average rating and its spread, with Helpful and Not helpful votes whose counts change as you choose.

  • Pro

    Interview Testimonials

    Chats and posts

    A customer interview as a Q&A transcript in a split: a rail with the headline, the interviewee and a Shine Button beside five ruled exchanges, each with its answer set as a quote and a chip with the time it was said.

  • 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