Skip to main content
Clever Ops

Testimonial Before After

Paired quotes from the same customer, what they said before and after 90 days, as two linked cards joined by a drawn connector, with honest mono dates.

Preview & code

Loading Testimonial Before After preview

Installation

pnpm dlx shadcn@latest add @cleverui/testimonial-before-after

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TestimonialBeforeAfter } from '@/components/blocks/testimonial-before-after'
Exampletsx
import { TestimonialBeforeAfter } from '@/components/blocks/testimonial-before-after'

export default function TestimonialBeforeAfterDemo() {
  return (
    <div className="mx-auto max-w-6xl">
      <TestimonialBeforeAfter
        eyebrow="Before / after"
        heading="What changed after ninety days on Ledger"
        connectorLabel="90 days later"
        pairs={[
          {
            before: {
              quote:
                'Our forecast lived in four spreadsheets. By the time finance closed the week, the pipeline had already moved.',
              date: 'Jan 12, 2025',
            },
            after: {
              quote:
                'Reps update one stage field. Leadership sees the same board. We stopped reconciling and started coaching.',
              date: 'Apr 14, 2025',
            },
            author: "Priya Nair",
            role: 'VP Revenue, Hearth & Co.',
            metric: '+31% close rate',
          },
          {
            before: {
              quote:
                'I was writing the same status email every Friday. Nobody trusted the numbers enough to decide on Monday.',
              date: 'Feb 3, 2025',
            },
            after: {
              quote:
                'Monday standups open on the board. The email is gone. Decisions take twelve minutes, not an hour.',
              date: 'May 5, 2025',
            },
            author: 'Jonah Reed',
            role: 'Director of Sales Ops, Hearth & Co.',
            metric: '−6 hrs / week',
          },
        ]}
      />
    </div>
  )
}

API reference

TestimonialBeforeAfter accepts the following props.

PropTypeDefaultDescription
eyebrowstring'Before / after'
heading*string
pairs*TestimonialBeforeAfterPair[]1–3 paired quotes from the same voice
connectorLabelstring'90 days later'mono chip seated on the drawn connector between the two cards

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface TestimonialBeforeAfterPair {
  before: TestimonialBeforeAfterQuote
  after: TestimonialBeforeAfterQuote
  author: string
  role?: string
  /** optional mono chip on the after card, e.g. '+31% close rate' */
  metric?: string
}

export interface TestimonialBeforeAfterQuote {
  quote: string
  date: string
}

Frequently asked questions

How do I install the Testimonial Before After component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/testimonial-before-after`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Testimonial Before After require?

Testimonial Before After uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Testimonial Before After to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services