Client Index Quote SwitcherPRO

Testimonial46: Client Index Quote Switcher

Testimonial section driven by a ruled client index. Clicking a name swaps the panel beside it, which carries the quote, a round portrait with the attribution and one ruled outcome figure, so social proof and results share a single compact section.

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

Base UI flavor

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

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

Quick start

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

import { Testimonial46, testimonial46Demo } from "@/components/beste/block/testimonial46";

export default function Page() {
  return <Testimonial46 {...testimonial46Demo} />;
}

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

import { Testimonial46 } from "@/components/beste/block/testimonial46";

export default function Page() {
  return (
    <Testimonial46
      badge={{ label: "Client stories" }}
      heading="Pick a name, read what happened."
      labels={{ indexTitle: "The clients" }}
      quotes={[
        {
          client: "Hallvard Press",
          sector: "Independent publishing",
          quote: "We came in asking for a logo and left with a catalogue people finish.",
          name: "Marit Hallvard",
          role: "Publisher",
          image: { src: "/people/marit.jpg", alt: "Portrait of Marit Hallvard" },
          result: { title: "Catalogue sales, first season", value: "Up by a third" },
        },
      ]}
    />
  );
}

Props

type StoryQuote = {
  client: string;
  sector: string;
  quote: string;
  name: string;
  role: string;
  image: { src: string; alt: string };
  result: { title: string; value: string };
};

type Testimonial46Labels = {
  indexTitle?: string;
};

Behavior notes

• The active index lives in useState(0), so the first story renders on the server and the panel is never blank before hydration.
• Index rows are <button type="button"> with aria-pressed, and the switch is bound to click, never hover: a pointer crossing the list must not change what you are reading.
• The active row is signalled by text colour alone, from text-muted-foreground to text-foreground, with no border weight or background change, so nothing shifts by a pixel when the selection moves.
• The portrait is a size-16 circle with object-cover, which is why any aspect ratio can be passed without distorting the face.
• result.value is a string, so an outcome can read Halved, 64 stores or Up by a third rather than forcing everything into a percentage.
• The two columns are md:grid-cols-[1fr_1.4fr], keeping the index narrow so the quote gets the width it needs to stay at text-2xl md:text-3xl.