# Testimonial 1

> Testimonial 1 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-testimonial-1).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-testimonial-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-testimonial-1-light-3ad1391adb973907.png
- Registry item: https://uiable.com/r/block-testimonial-1.json
- Categories: testimonial
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-testimonial-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `framer-motion`, `lucide-react`
- Registry items: `@uiable/avatar`

## Files

### `src/components/uiable/blocks/testimonial/testimonial-1/testimonial-1.tsx`

```tsx
"use client"

// shadcn
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

// third-party
import { motion, type Variants } from "framer-motion"

// assets
import { Heart, MessageCircle, Reply } from "lucide-react"

const testimonials = [
  {
    name: "Sarah Connor",
    avatar: "https://cdn.uiable.com/block/profile-1.png",
    position: "Lead DevOps Engineer",
    description:
      "This platform has completely transformed how our team manages deployment workflows. The onboarding is incredibly fast and intuitive.",
    likes: 133,
    replies: 34,
    comments: 67,
  },
  {
    name: "Emily Watson",
    avatar: "https://cdn.uiable.com/block/profile-4.png",
    position: "Product Manager at TechFlow",
    description:
      "Automating our repetitive tasks has saved us hours of manual coordination. We can now focus on what truly matters.",
    likes: 92,
    replies: 12,
    comments: 45,
  },
  {
    name: "Marcus Aurelius",
    avatar: "https://cdn.uiable.com/block/profile-5.png",
    position: "Chief Operations Officer",
    description:
      "Having instant access to detailed insights and performance metrics has empowered our team to make data-driven decisions confidently.",
    likes: 245,
    replies: 56,
    comments: 89,
  },
  {
    name: "Aria Montgomery",
    avatar: "https://cdn.uiable.com/block/profile-6.png",
    position: "Senior UX Designer",
    description:
      "Collaboration is seamless here. Real-time updates and shared workspaces have bridged the gap between our design and dev teams.",
    likes: 110,
    replies: 28,
    comments: 53,
  },
  {
    name: "Sophia Martinez",
    avatar: "https://cdn.uiable.com/block/profile-7.png",
    position: "Director of Security",
    description:
      "Security is paramount for us. The advanced encryption and role-based access controls keep our sensitive client data fully protected.",
    likes: 85,
    replies: 18,
    comments: 37,
  },
  {
    name: "James Wilson",
    avatar: "https://cdn.uiable.com/block/profile-8.png",
    position: "Integration Architect",
    description:
      "The pre-built integrations made it incredibly easy to connect all of our existing tools without breaking any workflows.",
    likes: 120,
    replies: 31,
    comments: 50,
  },
]

//  ------------------------------ | TESTIMONIAL 1 | ------------------------------  //

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1,
    },
  },
}

const itemVariants: Variants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] },
  },
}

export default function Testimonial1() {
  return (
    <section className="bg-slate-100 py-24 sm:py-32 dark:bg-slate-800">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={containerVariants}
          className="flex flex-col items-center gap-5 sm:gap-12"
        >
          <div className="flex flex-col items-center gap-4 text-center sm:gap-6">
            <motion.h2
              variants={itemVariants}
              className="text-lg font-medium text-slate-800 sm:text-3xl dark:text-slate-50"
            >
              Success stories unveiled
            </motion.h2>
            <motion.p
              variants={itemVariants}
              className="max-w-150 text-slate-600 dark:text-slate-100"
            >
              Explore success stories that highlight how our solutions have
              helped businesses overcome challenges, improve efficiency, and
              achieve measurable growth. These real-world examples demonstrate
              the impact of innovation and collaboration.
            </motion.p>
          </div>
          <motion.div
            variants={itemVariants}
            className="grid grid-cols-12 gap-4 text-left"
          >
            {testimonials.map((testimonial, idx) => (
              <motion.div
                key={idx}
                className="col-span-12 lg:col-span-6"
                variants={itemVariants}
                whileHover={{ scale: 1.015, y: -2 }}
                transition={{ duration: 0.3 }}
              >
                <div className="relative h-full overflow-hidden rounded-lg bg-card p-5 shadow-[0_0_40px_-8px_#4680ff38] sm:p-8 dark:shadow-none">
                  <div className="flex flex-row gap-4">
                    <Avatar className="size-20! shrink-0">
                      <AvatarImage
                        src={testimonial.avatar}
                        alt={testimonial.name}
                      />
                      <AvatarFallback>
                        {testimonial.name.split(" ")[0].charAt(0) +
                          testimonial.name.split(" ")[1].charAt(0)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="grow">
                      <div className="flex flex-col gap-3">
                        <div className="flex flex-col gap-0.5">
                          <div className="text-lg font-medium text-slate-800 dark:text-slate-50">
                            {testimonial.name}
                          </div>
                          <p className="dark:text-slate-505 text-base font-medium text-slate-400">
                            {testimonial.position}
                          </p>
                        </div>
                        <p className="text-slate-600 dark:text-slate-100">
                          {testimonial.description}
                        </p>
                        <div className="flex flex-row flex-wrap items-center gap-5 text-slate-500">
                          <div className="flex cursor-pointer flex-row items-center gap-1 transition-colors hover:text-rose-500">
                            <Heart className="size-4 text-rose-500" />
                            <span>{testimonial.likes}</span>
                          </div>
                          <div className="flex cursor-pointer flex-row items-center gap-1 transition-colors hover:text-sky-500">
                            <Reply className="size-4 text-sky-500" />
                            <span>{testimonial.replies}</span>
                          </div>
                          <div className="flex cursor-pointer flex-row items-center gap-1 transition-colors hover:text-lime-500">
                            <MessageCircle className="size-4 text-lime-500" />
                            <span>{testimonial.comments}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
```