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.
"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>
);
}
Part of SmoothUI — browse the full library on 21st.dev.