Inline Testimonials

Testimonials 5

About

A paragraph of body copy that weaves in customer names as inline triggers, expanding a quote card with avatar, role and star rating when a name is hovered, focused or tapped.

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

Code

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

Usage.tsx

"use client";

import InlineTestimonials, {
  type Testimonial,
} from "@/components/ui/inline-testimonials";

const TESTIMONIALS: Testimonial[] = [
  {
    id: "lead",
    name: "Maya Chen",
    role: "Product Lead, Northwind",
    avatar: "https://cdn.21st.dev/assets/mirror/c3/c33b1372bb36eba90e7848fccd72ad6b983ad84169236219a904d707e8d80974.jpg",
    quote:
      "We shipped the new dashboard three weeks early, and nobody had to touch the data layer to do it.",
    rating: 5,
  },
  {
    id: "engineer",
    name: "Diego Ortiz",
    role: "Frontend Engineer, Northwind",
    avatar: "https://cdn.21st.dev/assets/mirror/04/04801b210b20558a54d33c820a9ffc04c27da6da5bdb965f615225ef6a9f7189.jpg",
    quote:
      "The accessibility defaults meant our audit came back clean on the first try.",
    rating: 5,
  },
  {
    id: "reviewer",
    name: "Priya Nair",
    role: "Design Reviewer, Northwind",
    avatar: "https://cdn.21st.dev/assets/mirror/af/af98f5c913c79272d9bd4733259d1540823d92acfeafe751592fa263b24125f8.jpg",
    quote:
      "I reviewed 40 screens in an afternoon. Every transition already behaved the same way.",
    rating: 4,
  },
];

const STORY = `The brief was small: make the dashboard feel fast. {{lead}} ruled out a rewrite, so the team replaced the interaction layer instead. {{engineer}} took the accessibility pass, and by the time {{reviewer}} reviewed it, only copy tweaks were left.`;

export default function InlineTestimonialsDemo() {
  return (
    <div className="flex min-h-[22rem] w-full items-center justify-center bg-background py-6">
      <div className="flex w-full max-w-xl flex-col gap-4">
        <span className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.14em]">
          Case study
        </span>

        <InlineTestimonials
          className="text-lg leading-8"
          testimonials={TESTIMONIALS}
          text={STORY}
        />

        <p className="text-muted-foreground text-xs">
          Hover a name, or tab to it — the quote card opens from the name it
          belongs to.
        </p>
      </div>
    </div>
  );
}