Ayushmaan Singh

Voice Testimonial

Testimonials 120

About

Here is Voice Testimonial component

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

Code

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

Usage.tsx

// This is a demo of a preview
"use client";
import { Component } from "@/components/ui/voice-testimonial";

function DemoOne() {
  const testimonials = [
    {
      image:
        "https://cdn.21st.dev/assets/mirror/f0/f0c838a25f6460c39c84cb5835882259b9d99bae288116728edb4d28c9b730a9.jpg",
      name: "Ethan Smith",
      jobtitle: "Software Engineer",
      text: "This component library is incredibly versatile. It saved me hours of development time. The voice testimonials are a brilliant addition!",
      audio: "ethan-smith.mp3",
      social: "https://twitter.com/ethansmithdev",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/9f/9f8b26f06055b0fad168c4ecfa5d66444476b9c4aa37bc71d49208157883406d.jpg",
      name: "Olivia Chen",
      jobtitle: "Product Manager",
      text: "The seamless integration and intuitive design of these components are truly impressive. Our users love the new audio testimonials!",
      audio: "olivia-chen.mp3",
      social: "https://twitter.com/oliviachenpm",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/6b/6ba5674f5c5b523d73342d575c82e6767da8e7b9fc6ffddac67c93dd17d171c7.jpg",
      name: "Liam Johnson",
      jobtitle: "UX Designer",
      text: "As a UX designer, I appreciate the attention to detail. The audio feature adds a new dimension to testimonials, making them more engaging.",
      audio: "liam-johnson.mp3",
      social: "https://twitter.com/liamjohnsonux",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/72/72aaaefa57fb63db19fb0ee8be7ab81247f6a1a705af013862591a6a1a9be2ae.jpg",
      name: "Ava Martinez",
      jobtitle: "Marketing Specialist",
      text: "This library is a game-changer for our marketing efforts. The voice testimonials have significantly boosted our conversion rates!",
      audio: "ava-martinez.mp3",
      social: "https://twitter.com/avamarketing",
    },
    {
      image:
        "https://cdn.21st.dev/assets/localized/5b6358d6383724b41b3b94dddfa2b1d068f5db21a961fe875a2b58abfd4cb10c.jpg",
      name: "Noah Williams",
      jobtitle: "Full Stack Developer",
      text: "Developing with these components is a breeze. The documentation is clear, and the audio testimonials offer a unique user experience.",
      audio: "noah-williams.mp3",
      social: "https://twitter.com/noahwdev",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/c5/c5e905b2860ce5a3e29444919c8ea8ae09056efbf0f8c556c7dac89bee1f7c06.jpg",
      name: "Sophia Brown",
      jobtitle: "Content Creator",
      text: "The voice testimonial component is fantastic! It makes our content more dynamic and engaging. Highly recommend it to others.",
      audio: "sophia-brown.mp3",
      social: "https://twitter.com/sophiacreates",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/d3/d3df836ddb1cdd5c3f9b67cee0fbc2f703adecc684034c08114bb2f3dfa1f201.jpg",
      name: "James Davis",
      jobtitle: "Startup Founder",
      text: "As a startup, efficiency is key. This component library provides high-quality, ready-to-use solutions. The audio testimonials are a standout.",
      audio: "james-davis.mp3",
      social: "https://twitter.com/jamesdfounder",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/32/32f64aca4c830306f5500a0fac1f016796fe71d74d93047225b725174e4db3ce.jpg",
      name: "Benjamin Miller",
      jobtitle: "Backend Engineer",
      text: "Solid components and excellent performance. The voice testimonials integrate smoothly and provide a rich user experience.",
      audio: "benjamin-miller.mp3",
      social: "https://twitter.com/benmillerdev",
    },
  ];

  return (
    <div className="flex w-full h-screen justify-center items-center">
      <Component mode="dark" testimonials={testimonials} />
    </div>
  );
}

export default DemoOne;

Dependencies

More by Ayushmaan Singh

View all
  • Tubelight Navbar

    Tubelight Navbar

    3.6K
  • Theme Toggle

    Theme Toggle

    2.5K
  • Feature Section

    Feature Section

    1.7K
  • Vintage Keyboard

    Vintage Keyboard

    570
  • Thumbnail Carousel

    Thumbnail Carousel

    409
  • Typewriter Testimonial

    Typewriter Testimonial

    318
  • Image Fan Carousel

    Image Fan Carousel

    283
  • Testimonials

    Testimonials

    245

More in Testimonials

View all
  • Testimonial

    Testimonial

    117
  • testimonial

    testimonial

    797
  • Staggered Testimonials Grid

    Staggered Testimonials Grid

    143
  • Testimonial 2

    Testimonial 2

    32
  • Testimonial Card

    Testimonial Card

    69
  • Split Sign In Form

    Split Sign In Form

    16
  • Testimonials Marquee

    Testimonials Marquee

    574
  • Card Studio

    Card Studio

    15