Testimonial Card

Features 100

About

Testimonial Card This component, TestimonialCard, is designed to be a flexible and reusable element for displaying reviews and features. It accepts props for all dynamic content, including testimonials, features, ratings, and even the header logo, making it highly adaptable for different use cases beyond just Trustpilot.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Testimonial Card to your project and fits it to your theme.

Code

How Testimonial Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TestimonialCard } from "@/components/ui/testimonial-card-1";

// A simple SVG component for the Trustpilot logo to keep the demo self-contained.
const TrustpilotLogo = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.332 8.52227L12.0001 6.33398L5.66816 8.52227L7.02641 15.0163L2 19.6673L8.60458 17.0759L12.0001 22.0004L15.3956 17.0759L22 19.6673L16.9737 15.0163L18.332 8.52227Z" fill="#00B67A"/>
        <path d="M12 2L9.44 8.6L2 11L9.44 13.4L12 20L14.56 13.4L22 11L14.56 8.6L12 2Z" fill="white" transform="translate(-1, -1.5) scale(1.1)"/>
    </svg>
);


// Sample data for the demo
const featuresData = [
  "51K Happy customers",
  "4.4 Avg ratings",
  "6 months money back gurantee!",
  "Unlimited messaging with your provider",
];

const testimonialsData = [
  {
    name: "Laura Shouse",
    rating: 5,
    quote: "When I met Dr. Naji I knew my life was about to change. I have lost over 27 pounds since April of this year. he develops a very specific treatment plan for you that really works.",
  },
  {
    name: "Alex Johnson",
    rating: 5,
    quote: "A seamless experience from start to finish. The results exceeded all my expectations. Highly recommended for anyone looking for quality and reliability.",
  },
  {
    name: "Samantha Lee",
    rating: 4,
    quote: "Great service and a very professional team. They addressed all my concerns promptly. The final product was fantastic, though there was a slight delay.",
  },
];


export default function TestimonialCardDemo() {
  return (
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4">
      <TestimonialCard
        logo={<TrustpilotLogo />}
        overallRating={4.4}
        totalRatingsText="4.4 Ratings"
        title="Join thousands of happy customers"
        features={featuresData}
        testimonials={testimonialsData}
      />
    </div>
  );
}