# Testimonials Section v5

> Centered badge, headline, and description above a masonry wall-of-love grid of quote cards with avatar and name.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/testimonials-section-v5).

- Page, with a live preview: https://shadcn.exchange/r/uiception/testimonials-section-v5
- Screenshot: https://shadcn.exchange/shot/uiception/testimonials-section-v5/light.png
- Registry item: https://uiception.com/r/testimonials-section-v5.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/testimonials-section-v5.json
```

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

## Dependencies

- Registry items: `https://uiception.com/r/block-media.json`, `badge`, `avatar`

## Files

### `registry/new-york/blocks/testimonials-section-v5/page.tsx`

```tsx
import TestimonialsSectionV5 from "./components/testimonials-section-v5"

export default function Page() {
  return <TestimonialsSectionV5 />
}
```

### `registry/new-york/blocks/testimonials-section-v5/components/testimonials-section-v5.tsx`

```tsx
import { Badge } from "@/components/ui/badge"

import TestimonialCard from "./testimonial-card"
import { sectionMeta, testimonials } from "../lib/testimonials-content"

export default function TestimonialsSectionV5() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="flex flex-col items-center gap-4 text-center">
          <Badge variant="secondary">{sectionMeta.badge}</Badge>
          <h2 className="text-4xl font-medium tracking-tighter sm:text-5xl">
            {sectionMeta.title}
          </h2>
          <p className="max-w-lg text-sm leading-relaxed text-muted-foreground md:text-base">
            {sectionMeta.description}
          </p>
        </div>

        <div className="mt-10 columns-1 gap-4 sm:columns-2 md:mt-12 lg:mt-14 lg:columns-3">
          {testimonials.map((testimonial) => (
            <TestimonialCard key={testimonial.id} testimonial={testimonial} />
          ))}
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/testimonials-section-v5/components/testimonial-card.tsx`

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

import type { Testimonial } from "../lib/testimonials-content"

export default function TestimonialCard({
  testimonial,
}: {
  testimonial: Testimonial
}) {
  return (
    <article className="mb-4 break-inside-avoid rounded-lg border border-border bg-muted p-5 dark:bg-background md:p-6">
      <p className="text-sm leading-relaxed text-foreground">
        {testimonial.quote}
      </p>
      <div className="mt-5 flex items-center gap-3">
        <Avatar>
          <AvatarImage
            src={testimonial.avatarSrc}
            alt={testimonial.name}
            className="object-cover object-center"
          />
          <AvatarFallback>{testimonial.initials}</AvatarFallback>
        </Avatar>
        <p className="text-sm font-medium">{testimonial.name}</p>
      </div>
    </article>
  )
}
```

### `registry/new-york/blocks/testimonials-section-v5/lib/testimonials-content.ts`

```ts
import { createBlockImage } from "@/lib/block-media"

const blockAvatar = createBlockImage("testimonials-section-v5")

export type Testimonial = {
  id: string
  quote: string
  name: string
  initials: string
  avatarSrc: string
}

export const sectionMeta = {
  badge: "Customer Stories",
  title: "Our Wall of Love",
  description:
    "Read what our talented community members are saying about Acme",
}

export const testimonials: Testimonial[] = [
  {
    id: "will-barron",
    quote:
      "A hiring manager found my profile on Acme while searching for local designers. She reached out directly, and after one quick call I had an offer before the week was out.",
    name: "Will Barron",
    initials: "WB",
    avatarSrc: blockAvatar("avatar-2.png"),
  },
  {
    id: "priya-nair",
    quote: "Acme completely changed how our team collaborates. Simple as that.",
    name: "Priya Nair",
    initials: "PN",
    avatarSrc: blockAvatar("avatar-1.png"),
  },
  {
    id: "marcus-webb",
    quote:
      "I joined Acme mostly to get feedback on side projects, but ended up landing three freelance clients within my first month. The critique threads alone are worth more than most paid courses I've taken, and people actually follow up to see how your work turned out.",
    name: "Marcus Webb",
    initials: "MW",
    avatarSrc: blockAvatar("avatar-4.png"),
  },
  {
    id: "elena-ross",
    quote: "Best design community I've found online. Full stop.",
    name: "Elena Ross",
    initials: "ER",
    avatarSrc: blockAvatar("avatar-5.png"),
  },
  {
    id: "daniel-park",
    quote:
      "I posted my portfolio on Acme on a whim and within a week had a recruiter reach out about a role I wasn't even actively looking for. Wouldn't have happened anywhere else.",
    name: "Daniel Park",
    initials: "DP",
    avatarSrc: blockAvatar("avatar-6.png"),
  },
  {
    id: "grace-kim",
    quote:
      "What keeps me coming back to Acme is how generous everyone is with their time. I've had senior designers walk me through their entire process just because I asked a question in the comments. That kind of mentorship is rare, and it's the reason I've stuck around for three years now.",
    name: "Grace Kim",
    initials: "GK",
    avatarSrc: blockAvatar("avatar-3.png"),
  },
]
```

### `public/images/blocks/testimonials-section-v5/avatar-1.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/testimonials-section-v5/avatar-2.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/testimonials-section-v5/avatar-3.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/testimonials-section-v5/avatar-4.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/testimonials-section-v5/avatar-5.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/testimonials-section-v5/avatar-6.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```