Client Quote Ledger

Testimonial45: Client Quote Ledger

Three testimonials as ruled columns, each led by a grayscale client logo so the proof lands before the sentence does. Under the quote sits an attribution block naming the person, their role and the project they hired you for.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/testimonial45?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/testimonial45?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/testimonial45.tsx plus the badge7 component it uses for the eyebrow.

Quick start

The installed file exports testimonial45Demo alongside the block: the exact props behind the preview above. Spread it to get a working testimonial row in one line.

import { Testimonial45, testimonial45Demo } from "@/components/beste/block/testimonial45";

export default function Page() {
  return <Testimonial45 {...testimonial45Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Testimonial45 } from "@/components/beste/block/testimonial45";

export default function Page() {
  return (
    <Testimonial45
      badge={{ label: "Said afterwards" }}
      heading="Three clients, asked six months later."
      labels={{ projectTitle: "Worked on" }}
      quotes={[
        {
          logo: { src: "/logos/hallvard.png", alt: "Hallvard Press" },
          quote: "They rewrote a homepage we had argued about for a year.",
          name: "Ines Volkert",
          role: "Head of Brand",
          project: "Identity and site",
        },
      ]}
    />
  );
}

Props

type ClientQuote = {
  logo: { src: string; alt: string };
  quote: string;
  name: string;
  role: string;
  project: string;
};

type Testimonial45Labels = {
  projectTitle?: string;
};

Behavior notes

• Logos render at a fixed h-7 (md:h-8) with object-contain and a constant opacity-50 grayscale, which is the set's rule for client marks: they identify the source without competing with the quote.
• Each logo carries self-start object-left, so wordmarks of different widths all begin on the column's left edge instead of being centred by the flex column's default stretch.
• Each column is a figure with a blockquote and figcaption, so the attribution is programmatically tied to the quote rather than being a sibling paragraph.
• The caption block carries mt-auto, so attributions align across all three columns even when one quote runs two lines longer than the others.
• The project line sits under its own border-t inside the caption, which separates what they said from what you did for them.
• Quotes are set at text-xl md:text-2xl in font-semibold: large enough to carry the section, small enough that three of them fit side by side without truncation.