Notes Wall

Testimonial49: Notes Wall

A wall of short notes: six quotes on soft panels, each with an avatar and a context line, staggered so the middle column of every row sits a step lower.

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

Base UI flavor

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

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

Quick start

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

import { Testimonial49, testimonial49Demo } from "@/components/beste/block/testimonial49";

export default function Page() {
  return <Testimonial49 {...testimonial49Demo} />;
}

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

import { Testimonial49 } from "@/components/beste/block/testimonial49";

export default function Page() {
  return (
    <Testimonial49
      eyebrow="Said afterwards"
      heading="Short notes, left on the way out."
      button={{ label: "Leave your own", href: "/feedback", tone: "outline" }}
      quotes={[
        {
          quote: "I did not fix anything in the first month. I just stopped pretending.",
          name: "Ben Howard",
          context: "One year",
          avatar: { src: "/people/ben.jpg", alt: "Portrait" },
        },
      ]}
    />
  );
}

Props

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

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

Behavior notes

• The staggered look comes from one selector, lg:[&>*:nth-child(3n+2)]:mt-10, which drops the middle card of each row by a step; it applies to any number of quotes and disappears below lg where it would only look like broken spacing.
• The entry delay is (index % 3) * 0.12, so each row of three resolves left to right and the delay resets on the next row rather than growing across six cards.
• Each card is a figure with a blockquote and a figcaption, so the attribution is bound to the words rather than merely following them.
• Cards are flex with justify-between, so every attribution sits at the foot of its panel and the avatars line up across a row of uneven quotes.
• The avatar sits on a bg-background circle inside the muted panel, so the empty ring reads as an inset rather than as a grey hole while the image loads.
• context is a free string, so "One year", "Ten sessions" or "Fridays, on foot" all read naturally.
• Nothing here is a link; the pill beside the heading is the only interactive element.