Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Before and After Testimonials Block for React

Two quotes from one customer, the first week and month six, as two cells with a connector between them that holds the person and what changed, each change worked out from its before and after.

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

Let one customer tell the before and the after, in a testimonials section for React with Base UI. A compact header holds the one Shine Button. Below it, two quote cells, a cautious one from the first week and a confident one from month six on a soft tint, sit either side of a connector, each drawn with hairlines that run a little past its corners and a plus mark on the first one. The connector holds the person's initials, name and role (a platform lead at a CI company) and the two things that changed between the quotes, each with a badge worked out from its before and after: build time from 18 to 11 minutes is −39%, failed deploys from 9 to 2 a month is −78%. A hairline runs through the connector from the first cell to the second, ending in an arrow. On phones everything stacks into one column, with the connector between the quotes. It is built from Badge, Avatar, Shine Button and Guides with CSS entrances that stay still under reduced motion and your theme's tokens only.

FAQ

How do I change the quotes and the numbers?

Edit PERSON, STAGES and CHANGES at the top of the file. STAGES holds the two labels and quotes, and CHANGES holds each measure with its before, after and unit. The badge is worked out from them with whole-number maths and a real minus sign, and the range beside it is written from the same two numbers. Only put real quotes and numbers here, and say in the copy when they were given.

Why one person, not two?

A before and an after only mean something from the same voice. The person sits in the connector, once, so the cells can stay about the words. Each caption still names them for screen readers.

How is the connector drawn?

It is a hairline behind a solid box, with an arrow at its end: horizontal from lg up, vertical below, where the cells stack. The arrow mirrors in right-to-left layouts so it keeps pointing from the first quote to the last. The line and arrows are decorative.

How are the cells drawn?

Each quote is a relative cell with Guides extend="md" marks="start", so its four hairlines run 1rem past the corners with a plus on the top-start one, like a drawing's construction lines. The cells are inset from the page's rails, so the overshoot never reaches them. Month six has a solid tint, a mix of muted and background, and no ring: the tint marks where things ended up without using your primary colour.

What do screen readers read?

The first quote as a figure whose caption says who and when ("Mara Linden, Week 1"), then the person, then a list named "What changed" with each measure, its badge and its range, then the second quote the same way as the first.

Does it work in right-to-left languages?

Yes. The first cell moves to the right and the second to the left, the arrow flips, and badges and ranges sit in bdi so −39% and "18 → 11 min" keep their order.

  • 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

    Case Study Testimonial

    Results and figures

    A customer case study for a freight-tracking app, split by a hairline divider: the headline, a Shine Button and an at-a-glance list beside Challenge, Solution and Result bands with a headline figure and a pull quote.

  • Pro

    Metric Testimonials

    Results and figures

    Four testimonials for a UI kit in one hairline band, each cell headed by its own big figure, a gain, a multiple, a drop or a new value worked out from a before and an after, with the quote and the person underneath.

  • Pro

    Sortable Results Table Testimonials

    Results and figures

    A results table of five customers with a before, an after and the change between them, whose column headers sort it, in a band between the rails: a split divider sets the quote of whoever is at the top of the table apart from the table, with + marks where it meets the band's rule.

  • Pro

    Split Layout Before After Slider Hero

    Interactive demos

    A split hero for a site speed tool: a headline, a Shine Button and a second action beside a speed report that fills its cell edge to edge, before on one side of a handle and after on the other.

  • Pro

    Split Before and After List CTA

    Lists and steps

    A split call to action for a code reviewer: the pitch with a Shine Button and an outline button, beside a panel flush to the rail that sets the old way beside the new one in three ruled rows.

All 100 testimonials blocks