Skip to main content
Version: 1.0.0

TestimonialItem Component

The TestimonialItem component is a versatile React component designed to display customer testimonials. It features a customizable quote, star rating, author information, and the ability to highlight specific sentences within the testimonial text.

Importing the Component

To use the TestimonialItem component in your React application, import it as follows:

import { TestimonialItem } from '@/components/TestimonialItem';

Props

The TestimonialItem component accepts the following props:

Prop NameTypeDescription
textstringThe main text of the testimonial
namestringThe name of the person giving the testimonial
jobstringThe job title or company of the person
pictureUrlstringURL of the profile picture
highlightSentencesstring[] (optional)An array of sentences to highlight within the text

Basic Usage

Here's a basic example of how to use the TestimonialItem component:

import { TestimonialItem } from '@/components/TestimonialItem';

const MyTestimonial = () => {
return (
<TestimonialItem
text="This product has revolutionized our workflow. It's incredibly easy to use and has saved us countless hours. The customer support is also top-notch."
name='Jane Doe'
job='CEO, Tech Innovators'
pictureUrl='/path/to/jane-doe-picture.jpg'
highlightSentences={[
"It's incredibly easy to use and has saved us countless hours.",
]}
/>
);
};

Styling

The TestimonialItem component uses Tailwind CSS for styling. Key styling features include:

  • Maximum width of 600px for the entire component
  • Flexible layout using flexbox
  • Rounded full-width image for the author's picture
  • Color theming for light and dark modes
  • Custom brand colors for highlighted text and icons

Customization

To customize the TestimonialItem component:

  1. Modify the Tailwind CSS classes to change the appearance, spacing, or colors.
  2. Adjust the star rating by adding or removing <TbStarFilled /> components.
  3. Replace the TbQuote and TbStarFilled icons with different icons if desired.
  4. Extend the ITestimonialItemProps interface to include additional props for more customization options.

Accessibility

To improve accessibility:

  1. Consider adding appropriate ARIA labels to the star rating to convey the rating value to screen readers.
  2. Ensure sufficient color contrast for text elements, especially in dark mode.
  3. Add alt text to the author's image that includes their name and role.

Best Practices and Improvements

  1. Consider making the star rating dynamic based on a prop value.
  2. Implement error handling for cases where the pictureUrl is invalid or the image fails to load.
  3. Add prop validation using PropTypes or TypeScript to ensure required props are provided.
  4. Consider adding a fallback UI for when certain props are missing (e.g., a default avatar if no pictureUrl is provided).
  5. Optimize the component for better performance by memoizing the highlightText function if it's used frequently.

Example Usage in a Testimonial Section

Here's an example of how you might use multiple TestimonialItem components in a testimonial section:

import { TestimonialItem } from '@/components/TestimonialItem';

const TestimonialSection = () => {
const testimonials = [
{
text: "This product has revolutionized our workflow. It's incredibly easy to use and has saved us countless hours. The customer support is also top-notch.",
name: 'Jane Doe',
job: 'CEO, Tech Innovators',
pictureUrl: '/images/jane-doe.jpg',
highlightSentences: [
"It's incredibly easy to use and has saved us countless hours.",
],
},
{
text: "I can't imagine running my business without this tool. The features are comprehensive and the interface is intuitive. It's been a game-changer for us.",
name: 'John Smith',
job: 'Founder, StartUp Solutions',
pictureUrl: '/images/john-smith.jpg',
highlightSentences: ["It's been a game-changer for us."],
},
// Add more testimonials as needed
];

return (
<section className='py-12 bg-gray-50 dark:bg-gray-800'>
<div className='container mx-auto'>
<h2 className='text-3xl font-bold text-center mb-8'>
What Our Customers Say
</h2>
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
{testimonials.map((testimonial, index) => (
<TestimonialItem key={index} {...testimonial} />
))}
</div>
</div>
</section>
);
};

export default TestimonialSection;

This example demonstrates how to use multiple TestimonialItem components within a grid layout to create a comprehensive testimonial section.


By using the TestimonialItem component, you can easily display customer testimonials with a professional and customizable design. The component's ability to highlight specific sentences allows you to emphasize key points from each testimonial, potentially increasing the impact of your social proof elements.