# Testimonials 4

> Multi-column testimonial layout with quote icons, warm gradient background, and vertical divider.

A shadcn/ui block from the [@efferd](https://efferd.com/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/efferd/testimonials-4).

- Page, with a live preview: https://shadcn.exchange/r/efferd/testimonials-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/efferd/testimonials-4-light-08871b9f8c0a0621.png
- Registry item: https://efferd.com/r/testimonials-4.json
- Categories: testimonials
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://efferd.com/r/testimonials-4.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: `@efferd/full-width-divider`

## Files

### `registry/blocks/testimonials/4/testimonials-section.tsx`

```tsx
import { FullWidthDivider } from "@/components/full-width-divider";

type Testimonial = {
	quote: string;
	name: string;
	role: string;
	company?: string;
};

const testimonials: Testimonial[] = [
	{
		quote:
			"Efferd is so polished I might just retire and become a full-time potato farmer. The ecosystem is in safe hands.",
		name: "Shadcn",
		role: "Founder",
		company: "Shadcn UI",
	},
	{
		quote:
			"Efferd is why I still have hair. No more pulling it out over centering divs or fighting with CSS grid.",
		name: "Guillermo Rauch",
		role: "CEO",
		company: "Vercel",
	},

	{
		quote:
			"I tried to buy Efferd but they wouldn't sell. So I just bought Twitter instead to complain about it.",
		name: "Elon Musk",
		role: "CEO",
		company: "X.com",
	},
];

export function TestimonialsSection() {
	return (
		<section className="relative mx-auto min-h-screen w-full max-w-4xl place-content-center border-x">
			<FullWidthDivider />
			<div className="grid md:grid-cols-[2fr_1px_1fr]">
				<div className="divide-y">
					{testimonials.slice(0, 2).map((testimonial) => (
						<TestimonialCard key={testimonial.name} testimonial={testimonial} />
					))}
				</div>
				<div className="h-px bg-border md:h-auto" />
				<div className="flex items-center">
					<TestimonialCard testimonial={testimonials[2] as Testimonial} />
				</div>
			</div>
			<FullWidthDivider />
		</section>
	);
}

function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
	const { quote, name, role, company } = testimonial;

	return (
		<figure className="p-6 md:p-8">
			<IconPlaceholder
				aria-hidden="true"
				className="mb-4 size-12 stroke-1 text-muted-foreground"
				hugeicons="QuoteDownIcon"
				lucide="QuoteIcon"
				phosphor="QuotesIcon"
				remixicon="RiDoubleQuotesL"
				tabler="IconQuote"
			/>

			<blockquote className="mb-6 font-normal text-base text-foreground md:text-lg">
				&quot;{quote}&quot;
			</blockquote>

			<figcaption className="flex flex-col gap-0.5">
				<cite className="font-medium text-foreground text-lg not-italic">
					{name}
				</cite>
				<p className="text-muted-foreground text-sm">
					{role}
					{company && `, ${company}`}
				</p>
			</figcaption>
		</figure>
	);
}
```