Docs
Testimonial Card

Testimonial Card

A card component for displaying testimonials with avatar, name, username, content, and optional stars.

Sarah Wilson

Sarah Wilson

@sarahw

The attention to detail and user experience is outstanding. This is exactly what I've been looking for!

Posted 3 days ago

Installation

npx shadcn@latest add "https://www.layout.software/r/styles/default/testimonial.json"

Usage

import {
  Name,
  TestimonialAvatar,
  TestimonialCard,
  TestimonialContent,
  TestimonialDate,
  TestimonialHeader,
  TestimonialHighlight,
  TestimonialInfo,
  TestimonialStars,
  Username,
} from "@/components/ui/testimonial"
<TestimonialCard>
  <TestimonialHeader>
    <TestimonialAvatar src="/avatars/01.png" alt="User avatar" />
    <TestimonialInfo>
      <Name>John Doe</Name>
      <Username>@johndoe</Username>
    </TestimonialInfo>
  </TestimonialHeader>
  <TestimonialStars />
  <TestimonialContent>
    This product is <TestimonialHighlight>amazing</TestimonialHighlight>! It has
    completely transformed how I work.
  </TestimonialContent>
  <TestimonialDate>2 days ago</TestimonialDate>
</TestimonialCard>

You can also use the carousel component to display multiple testimonials:

<TestimonialCarousel>
  <TestimonialCard>{/* First testimonial */}</TestimonialCard>
  <TestimonialCard>{/* Second testimonial */}</TestimonialCard>
</TestimonialCarousel>
AchievementsTestimonial Carousel