[ [LC.05] Components ] Testimonials Section

Testimonials Section

> Social proof components with customer quotes, avatars, and grid layouts.

Preview

[ [0x00] TESTIMONIALS SECTION ]

[0x40]

LOVED BY DEVELOPERS

> Early access customer feedback

[0x01]

"[EXAMPLE] Your customer quote here with specific results."

CUSTOMER_NAMERole, Company

[0x02]

"[EXAMPLE] Another testimonial highlighting benefits."

CUSTOMER_NAMERole, Company

[0x03]

"[EXAMPLE] Include metrics when possible."

CUSTOMER_NAMERole, Company

1import { TestimonialsSection } from "@/components/marketing/testimonials-section";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      <PricingSection />
9      <TestimonialsSection />
10      {/* Other sections */}
11    </main>
12  );
13}

Variants

[ [0x00] SINGLE TESTIMONIAL CARD ]

[0x01]

"[EXAMPLE] Your customer quote here. Include specific results or metrics."

CUSTOMER NAMERole @ Company

1<Card className="p-6">
2  <p className="text-muted-foreground mb-4">
3    "Great product, highly recommend!"
4  </p>
5  <div className="flex items-center gap-4">
6    <Avatar>
7      <AvatarFallback>JD</AvatarFallback>
8    </Avatar>
9    <div>
10      <p className="font-semibold">John Doe</p>
11      <p className="text-sm text-muted-foreground">CEO @ Company</p>
12    </div>
13  </div>
14</Card>

[ [0x00] AVATAR GROUP ]

SCMJERDK

+99

Trusted by 500+ developers

1<div className="flex items-center gap-4">
2  <div className="flex -space-x-2">
3    {users.map((user) => (
4      <Avatar key={user.id} className="border-2 border-background">
5        <AvatarImage src={user.avatar} />
6        <AvatarFallback>{user.initials}</AvatarFallback>
7      </Avatar>
8    ))}
9    <div className="flex items-center justify-center bg-muted">
10      +{remainingCount}
11    </div>
12  </div>
13  <span>Trusted by 500+ developers</span>
14</div>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
testimonials	`{ quote: string; author: string; role: string; avatar?: string }[]`	-	Array of testimonials to display
columns	`2 \| 3`	`3`	Number of columns in the grid

Accessibility

[ [0x58] A11Y ]

Quotes are properly attributed with cite elements
Avatar images have alt text fallbacks
Cards are not focusable unless interactive
Color contrast meets WCAG AA standards

Preview

[ [0x00] TESTIMONIALS SECTION ]

[0x40]

LOVED BY DEVELOPERS

> Early access customer feedback

[0x01]

"[EXAMPLE] Your customer quote here with specific results."

CUSTOMER_NAMERole, Company

[0x02]

"[EXAMPLE] Another testimonial highlighting benefits."

CUSTOMER_NAMERole, Company

[0x03]

"[EXAMPLE] Include metrics when possible."

CUSTOMER_NAMERole, Company

1import { TestimonialsSection } from "@/components/marketing/testimonials-section";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      <PricingSection />
9      <TestimonialsSection />
10      {/* Other sections */}
11    </main>
12  );
13}

Variants

[ [0x00] SINGLE TESTIMONIAL CARD ]

[0x01]

"[EXAMPLE] Your customer quote here. Include specific results or metrics."

CUSTOMER NAMERole @ Company

1<Card className="p-6">
2  <p className="text-muted-foreground mb-4">
3    "Great product, highly recommend!"
4  </p>
5  <div className="flex items-center gap-4">
6    <Avatar>
7      <AvatarFallback>JD</AvatarFallback>
8    </Avatar>
9    <div>
10      <p className="font-semibold">John Doe</p>
11      <p className="text-sm text-muted-foreground">CEO @ Company</p>
12    </div>
13  </div>
14</Card>

[ [0x00] AVATAR GROUP ]

SCMJERDK

+99

Trusted by 500+ developers

1<div className="flex items-center gap-4">
2  <div className="flex -space-x-2">
3    {users.map((user) => (
4      <Avatar key={user.id} className="border-2 border-background">
5        <AvatarImage src={user.avatar} />
6        <AvatarFallback>{user.initials}</AvatarFallback>
7      </Avatar>
8    ))}
9    <div className="flex items-center justify-center bg-muted">
10      +{remainingCount}
11    </div>
12  </div>
13  <span>Trusted by 500+ developers</span>
14</div>

Prop

Type

Default

Description

testimonials

{ quote: string; author: string; role: string; avatar?: string }[]

Array of testimonials to display

columns

2 | 3

3

Number of columns in the grid