Single Voice

Testimonial51: Single Voice

A single voice at display size: the quote settles in word by word in the centre of the page, with a portrait, a name and a context line under it, and a pill at the foot.

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/testimonial51?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/testimonial51.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Testimonial51, testimonial51Demo } from "@/components/beste/block/testimonial51";

export default function Page() {
  return <Testimonial51 {...testimonial51Demo} />;
}

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

import { Testimonial51 } from "@/components/beste/block/testimonial51";

export default function Page() {
  return (
    <Testimonial51
      eyebrow="One voice"
      quote="I spent years telling people I was fine. The first thing anyone here said was that I did not have to be."
      author={{
        name: "Damien Rice",
        context: "Two years with the practice",
        avatar: { src: "/people/damien.jpg", alt: "Portrait of a client" },
      }}
      button={{ label: "More voices", href: "/stories", tone: "outline" }}
    />
  );
}

Props

type Author = {
  name: string;
  context: string;
  avatar: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The quote is a real blockquote and its attribution a figcaption, so the words are marked up as quoted material rather than as a large paragraph.
• Its stagger is tightened to 0.03s, faster than the component's default, because a quote runs to far more words than a heading and the default rhythm would leave the reader waiting.
• Everything after it waits on 0.2 + quote.split(" ").length * 0.03, the same arithmetic, so the attribution arrives exactly as the final word settles however long the quote is.
• The author block is centred as a unit but its text is left aligned, so the name and context read as a signature rather than as two more centred lines.
• Nothing here loads beyond the single avatar: no scroll listener, no grain, no parallax.
• The section is capped at max-w-4xl, so a display-size quote breaks into balanced lines instead of running the full width.
• Every part is optional, so this works as a bare quote, as a quote with an attribution, or as the full section.