Starred Reviews

Testimonial52: Starred Reviews

Four reviews in a ruled grid: each opens on a five-star rating drawn out of five, then a serif quote, a portrait and the context in which the person worked with you.

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

Base UI flavor

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

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

Quick start

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

import { Testimonial52, testimonial52Demo } from "@/components/beste/block/testimonial52";

export default function Page() {
  return <Testimonial52 {...testimonial52Demo} />;
}

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

import { Testimonial52 } from "@/components/beste/block/testimonial52";

export default function Page() {
  return (
    <Testimonial52
      eyebrow="Reviews"
      heading="In their own words, unedited."
      button={{ label: "Read all reviews", href: "/reviews", tone: "outline" }}
      reviews={[
        {
          quote: "I was worried therapy would feel clinical. It felt like a long conversation.",
          name: "Feist",
          context: "Individual therapy",
          rating: 5,
          avatar: { src: "/people/feist.jpg", alt: "Portrait" },
        },
      ]}
    />
  );
}

Props

type Review = {
  quote: string;
  name: string;
  context: string;
  rating: number;
  avatar: { src: string; alt: string };
};

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

Behavior notes

• Unlike the call-to-action blocks in this set, all five stars are always drawn and the empty ones are left in the border colour, so a four out of five reads as exactly that rather than as four marks in isolation.
• The rating is rounded and clamped into 0 to 5 before drawing, so a value out of range cannot break the row.
• The entry delay is (index % 2) * 0.12, so each row of two arrives a beat apart rather than the stagger growing down four reviews.
• Each review is a figure with a blockquote and a figcaption, so the attribution is bound to the words.
• There is no card surface: the reviews sit on the page under one border-t, which keeps a wall of four quotes from reading as four panels.
• context is a free string, so "Individual therapy", "Online" or "Evening practice" all read naturally without a taxonomy.
• Nothing here is a link; the pill beside the heading is the only interactive element.