Testimonial Carousel
A carousel component for displaying multiple testimonials with smooth scrolling and hover pause.
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
Emily Chen
@emilyc
I'm impressed by how intuitive and well-designed this is. Makes my workflow so much smoother!
Posted 1 week ago
Michael Brown
@michaelb
The customization options are fantastic. I can make it look exactly how I want!
Posted 2 weeks ago
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
Emily Chen
@emilyc
I'm impressed by how intuitive and well-designed this is. Makes my workflow so much smoother!
Posted 1 week ago
Michael Brown
@michaelb
The customization options are fantastic. I can make it look exactly how I want!
Posted 2 weeks ago
Installation
npx shadcn@latest add "https://www.layout.software/r/styles/default/testimonialcarousel.json"Usage
import {
Name,
TestimonialAvatar,
TestimonialCard,
TestimonialCarousel,
TestimonialContent,
TestimonialDate,
TestimonialHeader,
TestimonialHighlight,
TestimonialInfo,
TestimonialStars,
Username,
} from "@/components/ui/testimonial"<TestimonialCarousel>
<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>
<TestimonialCard>
<TestimonialHeader>
<TestimonialAvatar src="/avatars/02.png" alt="User avatar" />
<TestimonialInfo>
<Name>Jane Smith</Name>
<Username>@janesmith</Username>
</TestimonialInfo>
</TestimonialHeader>
<TestimonialStars />
<TestimonialContent>
The <TestimonialHighlight>user experience</TestimonialHighlight> is
outstanding. Highly recommended!
</TestimonialContent>
<TestimonialDate>1 week ago</TestimonialDate>
</TestimonialCard>
</TestimonialCarousel>Props
TestimonialCarousel
The carousel component accepts the following props:
speed(optional): Duration in seconds for one complete cycle. Defaults to 30.pauseOnHover(optional): Whether to pause the carousel on hover. Defaults to true.direction(optional): The scroll direction, either "ltr" or "rtl". Defaults to "ltr".