Testimonials

About

Editorial 3-up testimonial grid with a gold quote glyph, motion stagger on viewport entry, and hover-lift on each card. Drop in, pass a testimonials array, done.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Testimonials to your project and fits it to your theme.

Code

How Testimonials is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Testimonials, { type Testimonial } from "@/components/ui/testimonials-quote-cards";

const SAMPLE: Testimonial[] = [
  {
    quote:
      "They sketched the ring on a napkin during our first visit. Six weeks later, my wife cried when she saw it.",
    author: "Daniel R.",
    context: "Engagement ring · 2025",
  },
  {
    quote:
      "We chose them because it's still a family bench — no markup, no middleman. They reset my grandmother's diamond into a setting that finally feels mine.",
    author: "Priya S.",
    context: "Heritage reset",
  },
  {
    quote:
      "Three rings in seven years. They remember what every stone means in our story. That's not a jeweler, that's family.",
    author: "Marcus & Renee L.",
    context: "Repeat clients since 2018",
  },
];

export default function TestimonialsDemo() {
  return (
    <Testimonials
      eyebrow="Voices from the bench"
      heading={
        <>
          Stories that <span className="text-gold-gradient">last.</span>
        </>
      }
      testimonials={SAMPLE}
    />
  );
}