Docs
Native Modules
CustomerRatings

CustomerRatings Module

Overview

The CustomerRatings module creates an engaging display of customer satisfaction through star ratings and customer profile images. It's perfect for building trust and showcasing social proof on your website.

Key Features

  • Star rating display system
  • Customer profile image gallery
  • Hover effects on customer images
  • Responsive layout
  • Dark mode support
  • Optional section wrapper
  • Customizable colors and content

Quick Start

import CustomerRatings from '@/modules/native/CustomerRatings';
 
// Basic usage
const MyPage = () => {
  return (
    <CustomerRatings />
  );
};

Customization Options

Text Content Customization

Customize the text content by passing a text prop:

const MyPage = () => {
  const textContent = {
    title: "Trusted by thousands",
    rating: 4.5
  };
 
  return (
    <CustomerRatings text={textContent} />
  );
};

Text Properties

PropertyTypeDefaultDescription
titlestring"Join happy customers!"Display text
ratingnumber5Star rating (1-5)

Customer Images Customization

Customize the customer images by passing a customers prop:

const MyPage = () => {
  const customerImages = [
    { imageSrc: '/images/customer1.jpg', name: 'John Doe' },
    { imageSrc: '/images/customer2.jpg', name: 'Jane Smith' },
    // Add more customers as needed
  ];
 
  return (
    <CustomerRatings customers={customerImages} />
  );
};

Customer Properties

PropertyTypeDescription
imageSrcstringPath to customer image
namestringCustomer name (used for alt text)

Color Customization

Customize colors using the sectionColors prop:

const MyPage = () => {
  const colorSettings = {
    background: "bg-white",
    foreground: "text-gray-900"
  };
 
  return (
    <CustomerRatings sectionColors={colorSettings} />
  );
};

Color Properties

PropertyTypeDefaultDescription
backgroundstring"bg-background"Background color
foregroundstring"text-foreground"Text color

Section Mode

Toggle between inline and full-width section modes:

// Full-width section mode
<CustomerRatings isSection={true} />
 
// Inline mode (default)
<CustomerRatings isSection={false} />

Module Behavior

Star Rating Display

  • Uses HeroIcons StarIcon component
  • Shows 5 stars total
  • Filled stars indicate rating level
  • Empty stars are gray (text-gray-300)
  • Filled stars are yellow (text-yellow-400)

Best Practices

  1. Images

    • Use square images
    • Ensure good quality headshots
    • Optimize images for web
    • Keep file sizes small

  2. Content

    • Keep titles short and impactful
    • Use accurate ratings
    • Maintain consistent image style

Common Usage Examples

Basic Rating Display

<CustomerRatings
  text={{
    title: "Rated 5 stars by our customers",
    rating: 5
  }}
/>

Custom Customer Gallery

<CustomerRatings
  customers={[
    { imageSrc: '/images/testimonial1.jpg', name: 'Alex Johnson' },
    { imageSrc: '/images/testimonial2.jpg', name: 'Maria Garcia' },
    { imageSrc: '/images/testimonial3.jpg', name: 'Sam Lee' }
  ]}
  text={{
    title: "Join our satisfied customers",
    rating: 4.8
  }}
/>

Section with Custom Colors

<CustomerRatings
  isSection={true}
  sectionColors={{
    background: "bg-blue-50",
    foreground: "text-blue-900"
  }}
  text={{
    title: "Trusted by industry leaders",
    rating: 5
  }}
/>

Need Help?

If you have questions or need support, please contact us by email at startupbolt@gmail.com or on Twitter at https://x.com/nifal_adam (opens in a new tab).

CTAFeatureTabs