Dhileep Kumar GM

Community Testimonial

Testimonials 125

About

A responsive, accessible React testimonials section with looping horizontal scrollers, reusable TestimonialCard components, staggered entrance animations, hover-to-pause behavior, and a soft radial background for a polished, product-facing presentation.

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

Code

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

Usage.tsx

import TestimonialsSection from "@/components/ui/community-testimonial";

export default function DemoOne() {
  const testimonialsData = {
    title: "Don't just take our word for it",
    subtitle:
      "See what our users are saying about how our app has transformed their daily routines and helped them build lasting habits.",
    rows: [
      {
        id: "row1",
        speed: "50s",
        direction: "left",
        testimonials: [
          {
            id: "t1",
            quote:
              "This app completely changed how I approach my goals. The visual feedback is incredibly motivating!",
            authorName: "Sarah K.",
            authorTitle: "Productivity Blogger",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/3c/3c35aa9efdbb352e1b16730e07e61207ab6f55ac60f4d2890d088445f3bbfcc3.svg",
          },
          {
            id: "t2",
            quote:
              "I've tried countless habit trackers, and this is the first one that actually stuck. It's simple, beautiful, and effective.",
            authorName: "Michael B.",
            authorTitle: "Software Engineer",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/dc/dcf2ad883199e06432ac3549aaee5407d4def90719dcb20298fa85512bd24b3e.svg",
          },
          {
            id: "t3",
            quote:
              "The team accountability features are a game-changer. Our entire group is more motivated and connected.",
            authorName: "Emily W.",
            authorTitle: "Startup Founder",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/5e/5eecceacc9a31cc5dc836c3481c9b06e469f082eca89c781acf517cabdee9ae0.svg",
          },
        ],
      },
      {
        id: "row2",
        speed: "40s",
        direction: "right",
        testimonials: [
          {
            id: "t4",
            quote:
              "The design is just stunning. It feels less like a chore and more like a game. I'm hooked!",
            authorName: "David L.",
            authorTitle: "UX Designer",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/9b/9b492ad9ca71ba7ebc86dc670136102b242a1f8cbc24abe2b1a22b521be19be0.svg",
          },
          {
            id: "t5",
            quote:
              "Simple, no clutter, does exactly what it promises. The reminders are gentle but effective.",
            authorName: "Jessica P.",
            authorTitle: "Student",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/f7/f729de6cbdaa4d081daf0afba060b23c00ea5fba9d7fce6e81af016d5469443c.svg",
          },
          {
            id: "t6",
            quote:
              "Seeing my progress in the analytics section is the best part of my week. It shows my work is paying off.",
            authorName: "Alex C.",
            authorTitle: "Data Analyst",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a340bfeca194b481819bb24a19ccdca19754817c8c7b5b4fbf19a778b1bcf707.svg",
          },
        ],
      },
      {
        id: "row3",
        speed: "60s",
        direction: "left",
        testimonials: [
          {
            id: "t7",
            quote:
              "I love that my data is private. In a world where everything is tracked, this feels safe and personal.",
            authorName: "Kenji T.",
            authorTitle: "Privacy Advocate",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/7f/7f787a771af5b6217a60264a1d4619e663c631b92e092fbe7e72ac332823ad20.svg",
          },
          {
            id: "t8",
            quote:
              "Finally, a habit app that isn't bloated with features I don't need. It's focused and powerful.",
            authorName: "Maria G.",
            authorTitle: "Writer",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/60/60db1a70cb17a418aa5d3a51c96bda847faa6a3d1e302e39599a461fad85e78a.svg",
          },
          {
            id: "t9",
            quote:
              "The community support is surprisingly wholesome. It's a great place for accountability.",
            authorName: "Chris R.",
            authorTitle: "Fitness Coach",
            avatarUrl: "https://cdn.21st.dev/assets/mirror/c4/c42ee82e6c8087dae0188252065d0b1582f6b38fa7fd69304fbe866f5a5c45ab.svg",
          },
        ],
      },
    ],
  };

  return (
    <div
      className="app-root bg-radial min-h-screen flex items-center justify-center py-20 px-4"
      aria-label="Testimonials showcase"
    >
      <TestimonialsSection data={testimonialsData} />
    </div>
  );
}

More by Dhileep Kumar GM

View all
  • Aether Flow Hero

    Aether Flow Hero

    1.9K
  • Woven Light Hero

    Woven Light Hero

    1.5K
  • AnomalousMatterHero

    AnomalousMatterHero

    1.5K
  • PulseFit hero

    PulseFit hero

    922
  • Mountain Scene

    Mountain Scene

    859
  • HolographicCard

    HolographicCard

    819
  • 3D Animation

    3D Animation

    760
  • Cybernetic Bento Grid

    Cybernetic Bento Grid

    556

More in Testimonials

View all
  • Testimonial

    Testimonial

    116
  • testimonial

    testimonial

    794
  • Staggered Testimonials Grid

    Staggered Testimonials Grid

    143
  • Testimonial 2

    Testimonial 2

    31
  • Voice Testimonial

    Voice Testimonial

    119
  • Split Sign In Form

    Split Sign In Form

    15
  • Testimonial Card

    Testimonial Card

    69
  • Testimonials Marquee

    Testimonials Marquee

    572