Three Ruled Quotes

Testimonial54: Three Ruled Quotes

Three short quotes in a ruled row, each with a name and the kind of work it came from, with the vertical rules drawn only between the columns.

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

Base UI flavor

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

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

Quick start

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

import { Testimonial54, testimonial54Demo } from "@/components/beste/block/testimonial54";

export default function Page() {
  return <Testimonial54 {...testimonial54Demo} />;
}

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

import { Testimonial54 } from "@/components/beste/block/testimonial54";

export default function Page() {
  return (
    <Testimonial54
      eyebrow="Three sentences each"
      heading="What people say when we ask them to keep it short."
      button={{ label: "Longer stories", href: "/stories", tone: "outline" }}
      quotes={[
        { quote: "I expected advice. I got attention, which turned out to be what I was short of.", name: "Angel Olsen", context: "Individual therapy" },
        { quote: "The plan we wrote in week one was still on my fridge in week twelve.", name: "Kurt Vile", context: "Coaching" },
      ]}
    />
  );
}

Props

type Quote = {
  quote: string;
  name: string;
  context: string;
};

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

Behavior notes

• There are no portraits here, which is the point of the block: it is the lightest testimonial in the set, with nothing to load beyond the type.
• The dividing rules come from md:border-l on each quote with md:first:border-l-0 unsetting the first, so a three-up row is separated without an outer line on either edge.
• Those borders apply only from md, so on a phone the quotes stack with spacing rather than carrying a stray vertical rule.
• Each column is flex with justify-between, so the attributions line up along the bottom of the row however uneven the quotes are.
• Quotes are figure elements with a blockquote and a figcaption, so the attribution stays bound to the words.
• Columns enter with a 0.12s stagger by index, resolving left to right.
• The grid is fixed at three from md, so a fourth quote wraps to a new row rather than compressing the first three.