# Testimonials Section v7
> Split layout with a title and short description on the left and three overlapping, slightly tilted quote cards on the right, each showing the person, role, and company wordmark.
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-v7).
- Page, with a live preview: https://shadcn.exchange/r/uiception/testimonials-section-v7
- Screenshot: https://shadcn.exchange/shot/uiception/testimonials-section-v7/light.png
- Registry item: https://uiception.com/r/testimonials-section-v7.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/testimonials-section-v7.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`
## Files
### `registry/new-york/blocks/testimonials-section-v7/page.tsx`
```tsx
import TestimonialsSectionV7 from "./components/testimonials-section-v7"
export default function Page() {
return
}
```
### `registry/new-york/blocks/testimonials-section-v7/components/testimonials-section-v7.tsx`
```tsx
import { createBlockImage } from "@/lib/block-media"
import TestimonialStack from "./testimonial-stack"
import {
sectionMeta,
testimonials as testimonialItems,
type ResolvedTestimonial,
} from "../lib/testimonials-content"
const blockImage = createBlockImage("testimonials-section-v7")
export default function TestimonialsSectionV7() {
const testimonials: ResolvedTestimonial[] = testimonialItems.map((item) => {
const { avatarFile, ...rest } = item
return {
...rest,
avatarSrc: blockImage(avatarFile),
}
})
return (
{sectionMeta.title}
{sectionMeta.description}
)
}
```
### `registry/new-york/blocks/testimonials-section-v7/components/testimonial-stack.tsx`
```tsx
import TestimonialCard from "./testimonial-card"
import type { ResolvedTestimonial } from "../lib/testimonials-content"
/**
* Per-slot offset, tilt, and stacking order for the overlapping layout.
* The middle card sits behind its neighbours; hovering any card squares it
* up and lifts it to the front. Mobile falls back to a plain vertical list.
*/
const SLOT_CLASSES = [
"z-20 lg:mr-14 lg:rotate-[1.5deg]",
"z-10 lg:-mt-5 lg:ml-14 lg:-rotate-[0.75deg]",
"z-20 lg:-mt-5 lg:mr-8 lg:-rotate-[1.25deg]",
] as const
export default function TestimonialStack({
testimonials,
}: {
testimonials: ResolvedTestimonial[]
}) {
return (
{testimonials.map((testimonial, index) => (
))}
)
}
```
### `registry/new-york/blocks/testimonials-section-v7/components/testimonial-card.tsx`
```tsx
import Image from "next/image"
import type { ResolvedTestimonial } from "../lib/testimonials-content"
export default function TestimonialCard({
testimonial,
}: {
testimonial: ResolvedTestimonial
}) {
const { name, role, avatarSrc, quote, company } = testimonial
const MarkLight = company.markLight
const MarkDark = company.markDark
return (
“{quote}”
{name}
{role}
)
}
```
### `registry/new-york/blocks/testimonials-section-v7/lib/testimonials-content.ts`
```ts
import type { ComponentType, SVGProps } from "react"
import { GithubWordmarkDark } from "@/components/ui/svgs/githubWordmarkDark"
import { GithubWordmarkLight } from "@/components/ui/svgs/githubWordmarkLight"
import { StripeWordmark } from "@/components/ui/svgs/stripeWordmark"
import { StripeWordmarkDark } from "@/components/ui/svgs/stripeWordmarkDark"
import { VercelWordmark } from "@/components/ui/svgs/vercelWordmark"
import { VercelWordmarkDark } from "@/components/ui/svgs/vercelWordmarkDark"
export type SvgComponent = ComponentType>
export type CompanyMark = {
name: string
/** Wordmark shown on light cards. */
markLight: SvgComponent
/** Wordmark shown on dark cards. */
markDark: SvgComponent
/** Height utility that optically balances this wordmark against the others. */
markClassName: string
}
export type TestimonialItem = {
id: string
name: string
role: string
avatarFile: string
quote: string
company: CompanyMark
}
export type ResolvedTestimonial = Omit & {
avatarSrc: string
}
export const sectionMeta = {
title: "What teams are building with us",
description:
"Engineering and product teams at Stripe, GitHub, and Vercel run their day-to-day on the platform. Here's what the people running it have to say.",
} as const
export const testimonials: TestimonialItem[] = [
{
id: "stripe",
name: "Sofia Marquez",
role: "Head of Payments, Stripe",
avatarFile: "avatar-1.png",
quote:
"We centralized checkout monitoring into one live dashboard and shipped the integration in a single sprint. Nothing else we evaluated came close to that.",
company: {
name: "Stripe",
markLight: StripeWordmark,
markDark: StripeWordmarkDark,
markClassName: "h-6",
},
},
{
id: "github",
name: "Lucas Bennett",
role: "VP Engineering, GitHub",
avatarFile: "avatar-2.png",
quote:
"We migrated our entire release workflow with zero downtime. As someone who has run a few of these, I know how rare that is.",
company: {
name: "GitHub",
markLight: GithubWordmarkLight,
markDark: GithubWordmarkDark,
markClassName: "h-4",
},
},
{
id: "vercel",
name: "Mei Lin",
role: "Director of Platform, Vercel",
avatarFile: "avatar-3.png",
quote:
"Every pull request now gets a live, reviewable preview. It changed how our team gives feedback.",
company: {
name: "Vercel",
markLight: VercelWordmark,
markDark: VercelWordmarkDark,
markClassName: "h-3.5",
},
},
]
```
### `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/vercelWordmark.tsx`
```tsx
import type { SVGProps } from "react";
const VercelWordmark = (props: SVGProps) => (
);
export { VercelWordmark };
```
### `components/ui/svgs/vercelWordmarkDark.tsx`
```tsx
import type { SVGProps } from "react";
const VercelWordmarkDark = (props: SVGProps) => (
);
export { VercelWordmarkDark };
```
### `public/images/blocks/testimonials-section-v7/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-v7/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-v7/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.
```