# Testimonials Section v2
> Three-column bordered quotes with serif italic text, square avatars, and company wordmarks.
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-v2).
- Page, with a live preview: https://shadcn.exchange/r/uiception/testimonials-section-v2
- Screenshot: https://shadcn.exchange/shot/uiception/testimonials-section-v2/light.png
- Registry item: https://uiception.com/r/testimonials-section-v2.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/testimonials-section-v2.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: `geist`
- Registry items: `https://uiception.com/r/block-media.json`, `avatar`
## Files
### `registry/new-york/blocks/testimonials-section-v2/page.tsx`
```tsx
import TestimonialsSectionV2 from "./components/testimonials-section-v2"
export default function Page() {
return
}
```
### `registry/new-york/blocks/testimonials-section-v2/components/testimonials-section-v2.tsx`
```tsx
import TestimonialColumn from "./testimonial-column"
import { testimonials } from "../lib/testimonials-content"
export default function TestimonialsSectionV2() {
return (
{testimonials.map((testimonial) => (
))}
)
}
```
### `registry/new-york/blocks/testimonials-section-v2/components/testimonial-column.tsx`
```tsx
import { GeistSans } from "geist/font/sans"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import CompanyLogo from "./company-logo"
import type { Testimonial } from "../lib/testimonials-content"
export default function TestimonialColumn({
testimonial,
}: {
testimonial: Testimonial
}) {
return (
{testimonial.quote}
)
}
```
### `registry/new-york/blocks/testimonials-section-v2/components/company-logo.tsx`
```tsx
import type { CompanyLogo } from "../lib/testimonials-content"
export default function CompanyLogo({ logo }: { logo: CompanyLogo }) {
const Light = logo.light
const Dark = logo.dark
if (Dark) {
return (
)
}
return (
)
}
```
### `registry/new-york/blocks/testimonials-section-v2/lib/testimonials-content.ts`
```ts
import { createBlockImage } from "@/lib/block-media"
import type { ComponentType, SVGProps } from "react"
import { StripeWordmark } from "@/components/ui/svgs/stripeWordmark"
import { StripeWordmarkDark } from "@/components/ui/svgs/stripeWordmarkDark"
import { GithubWordmarkLight } from "@/components/ui/svgs/githubWordmarkLight"
import { GithubWordmarkDark } from "@/components/ui/svgs/githubWordmarkDark"
import { betterAuthWordmarkLight } from "@/components/ui/svgs/betterAuthWordmarkLight"
import { betterAuthWordmarkDark } from "@/components/ui/svgs/betterAuthWordmarkDark"
export type SvgComponent = ComponentType>
export type CompanyLogo = {
name: string
light: SvgComponent
dark?: SvgComponent
}
export type Testimonial = {
id: string
quote: string
name: string
title: string
avatarSrc: string
initials: string
logo: CompanyLogo
}
const blockAvatar = createBlockImage("testimonials-section-v2")
export const testimonials: Testimonial[] = [
{
id: "marcus-chen",
quote:
"We cut onboarding time in half. The API was straightforward and our team shipped the integration in a single sprint.",
name: "Marcus Chen",
title: "Stripe",
initials: "MC",
avatarSrc: blockAvatar("avatar-1.png"),
logo: {
name: "Stripe",
light: StripeWordmark,
dark: StripeWordmarkDark,
},
},
{
id: "david-park",
quote:
"Migration was painless. We moved our entire workflow over without downtime and the team picked it up immediately.",
name: "David Park",
title: "GitHub",
initials: "DP",
avatarSrc: blockAvatar("avatar-2.png"),
logo: {
name: "GitHub",
light: GithubWordmarkLight,
dark: GithubWordmarkDark,
},
},
{
id: "sarah-mitchell",
quote:
"Real-time sync across our stack changed how we build. Our agents finally have one source of truth they can trust.",
name: "Sarah Mitchell",
title: "Better Auth",
initials: "SM",
avatarSrc: blockAvatar("avatar-3.png"),
logo: {
name: "Better Auth",
light: betterAuthWordmarkLight,
dark: betterAuthWordmarkDark,
},
},
]
```
### `components/ui/svgs/stripeWordmark.tsx`
```tsx
import type { SVGProps } from "react";
const StripeWordmark = (props: SVGProps) => (
);
export { StripeWordmark };
```
### `components/ui/svgs/stripeWordmarkDark.tsx`
```tsx
import type { SVGProps } from "react";
const StripeWordmarkDark = (props: SVGProps) => (
);
export { StripeWordmarkDark };
```
### `components/ui/svgs/githubWordmarkLight.tsx`
```tsx
import type { SVGProps } from "react";
const GithubWordmarkLight = (props: SVGProps) => (
);
export { GithubWordmarkLight };
```
### `components/ui/svgs/githubWordmarkDark.tsx`
```tsx
import type { SVGProps } from "react";
const GithubWordmarkDark = (props: SVGProps) => (
);
export { GithubWordmarkDark };
```
### `components/ui/svgs/betterAuthWordmarkLight.tsx`
```tsx
import type { SVGProps } from "react";
const betterAuthWordmarkLight = (props: SVGProps) => (
);
export { betterAuthWordmarkLight };
```
### `components/ui/svgs/betterAuthWordmarkDark.tsx`
```tsx
import type { SVGProps } from "react";
const betterAuthWordmarkDark = (props: SVGProps) => (
);
export { betterAuthWordmarkDark };
```
### `public/images/blocks/testimonials-section-v2/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-v2/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-v2/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.
```