Components
Loading preview...
The Testimonials Carousel component is a modern, dynamic way to showcase customer feedback in a visually appealing manner. It displays testimonial cards that scroll infinitely in either direction, providing a continuous loop of client reviews. Each card contains the user’s feedback, their image, name, and role, with the option to highlight specific keywords for emphasis. The component ensures that all text remains neatly contained within the card, maintaining readability and design consistency. Users can configure key aspects such as the scroll speed, card height, and direction of movement, allowing seamless integration into different layouts. With full support for both light and dark themes, this component enhances the presentation of user testimonials while creating an engaging and interactive user experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/testimonials-carousel"use client";
import React from "react";
import { TestimonialsCarousel, Testimonial } from "@/components/ui/testimonials-carousel";
const testimonials: Testimonial[] = [
{
text: "The collaboration tools completely changed how our teams work together efficiently. Our productivity has doubled, and communication between departments is seamless. The intuitive interface makes effortless.",
highlight: "collaboration tools",
image: "https://randomuser.me/api/portraits/women/21.jpg",
name: "Priya Kapoor",
role: "Team Lead",
},
{
text: "Real-time reporting has made our management decisions much faster and accurate. The dashboard allows managers to get insights instantly, enabling proactive decisions and reducing errors.",
highlight: "Real-time reporting",
image: "https://randomuser.me/api/portraits/men/22.jpg",
name: "Rohit Verma",
role: "Operations Manager",
},
{
text: "Customer engagement features allowed us to reach our clients better than ever. Automated notifications, feedback collection, and analytics have improved retention and satisfaction.",
highlight: "Customer engagement features",
image: "https://randomuser.me/api/portraits/women/23.jpg",
name: "Anjali Mehta",
role: "Marketing Head",
},
{
text: "The automation workflow reduced repetitive tasks and improved productivity. Employees now spend more time on value-added work, which has improved our bottom line.",
highlight: "automation workflow",
image: "https://randomuser.me/api/portraits/men/24.jpg",
name: "Siddharth Rao",
role: "IT Specialist",
},
{
text: "The AI analytics insights are invaluable for planning our next steps. Forecasting trends, predicting customer behavior, and analyzing sales data have never been easier.",
highlight: "AI analytics insights",
image: "https://randomuser.me/api/portraits/women/25.jpg",
name: "Nisha Sharma",
role: "Data Analyst",
},
];
const TestimonialsDemoPage = () => {
return (
<section className="py-20">
<div className="container mx-auto text-center max-w-3xl">
<h2 className="text-3xl sm:text-4xl font-bold">What Our Clients Say</h2>
<p className="mt-3 text-gray-600 dark:text-gray-300">
Testimonials from companies using our platform to boost productivity.
</p>
</div>
<div className="mt-10 px-6 space-y-6">
<TestimonialsCarousel
testimonials={testimonials}
speed={25}
direction="left"
cardHeight={200}
/>
<TestimonialsCarousel
testimonials={testimonials}
speed={30}
direction="right"
cardHeight={200}
/>
</div>
</section>
);
};
export default TestimonialsDemoPage;