Voice Testimonial

This VoiceTestimonial component displays
user testimonials with audio playback and animated visual effects.

Read what people are sayingDummy feedback from virtual customers
using our component library.
profile
Alice JohnsonFrontend Developer
I'm blown away by the versatility of the components in this library. They make UI development a breeze!
profile
David SmithUI Designer
Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!
profile
Emma BrownSoftware Engineer
The components in this library are not just well-designed but also highly customizable. It's a developer's dream!
profile
James WilsonProduct Manager
I love how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.
profile
Sophia LeeUX Specialist
Implementing this component library was a game-changer for our team. It has elevated our product's UI to a whole new level!
profile
Michael DavisFull Stack Developer
Using this library has been a game-changer for our product development.
profile
Emily ChenMobile App Developer
The components are highly responsive and work seamlessly across different devices and screen sizes.
profile
Robert LeeGraphic Designer
I love how easy it is to customize the components to fit our brand's style. The design is clean and modern.
profile
Sarah TaylorBackend Developer
This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.
profile
Kevin WhiteUI/UX Designer
I appreciate the attention to detail in the design. The components are visually appealing and professional.
profile
Rachel PatelFull Stack Developer
The components are highly customizable and can be easily integrated with our existing UI framework.
profile
Brian KimMobile App Developer
I love how the components are designed to be highly responsive and work well across different screen sizes.
Installation
npx @ayushmxxn/serenity-ui@latest add voice-testimonial
Usage
import React from 'react'
import VoiceTestimonial from './components/ui/VoiceTestimonial'

const testimonials = [

  {
    image: 'https://via.placeholder.com/150',
    text: 'Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!',
    name: 'David Smith',
    jobtitle: 'UI Designer',
    audio: 'David.mp3',
    social: 'https://x.com'
    
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'I love  how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.',
    name: 'James Wilson',
    jobtitle: 'Product Manager',
    audio: 'James.mp3',
    social: 'https://x.com'
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'Using this library has been a game-changer for our product development.',
    name: 'Michael Davis',
    jobtitle: 'Full Stack Developer',
    audio: 'Michael.mp3',
    social: 'https://x.com'
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'The components are highly responsive and work seamlessly across different devices and screen sizes.',
    name: 'Emily Chen',
    jobtitle: 'Mobile App Developer',
    audio: 'Emily.mp3',
    social: 'https://x.com'
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.',
    name: 'Sarah Taylor',
    jobtitle: 'Backend Developer',
    audio: 'Sarah.mp3',
    social: 'https://x.com'
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'I appreciate the attention to detail in the design. The components are visually appealing and professional.',
    name: 'Kevin White',
    jobtitle: 'UI/UX Designer',
    audio: 'Kevin.mp3',
    social: 'https://x.com'
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'The components are highly customizable and can be easily integrated with our existing UI framework.',
    name: 'Rachel Patel',
    jobtitle: 'Full Stack Developer',
    audio: 'Rachel.mp3',
    social: 'https://x.com'
  },
  {
    image: 'https://via.placeholder.com/150',
    text: 'I love how the components are designed to be highly responsive and work well across different screen sizes.',
    name: 'Brian Kim',
    jobtitle: 'Mobile App Developer',
    audio: 'Brian.mp3',
    social: 'https://x.com'
  },
];

function Home() {
  return (
    <div>
      <VoiceTestimonial mode='light' testimonials={testimonials} />
    </div>
  )
}

export default Home;

Props

Prop NameTypeDescription
imagestringURL of the avatar image
namestringName of the person
jobtitlestringJob title of the person
textstringTestimonial of the person
audiostringPath to an audio file
socialstringURL of the social media profile
modestringSpecifies the color scheme. Possible values are light or dark.
Built byAyushmaan Singh. The source code is available onGithub