# Testimonials Section v3
> Four-card bento grid of success stories with company wordmarks, quotes, name and role, and Read story links.
A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/testimonials-section-v3).
- Page, with a live preview: https://shadcn.exchange/r/uiception/testimonials-section-v3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/testimonials-section-v3-light-398039e6187410f6.png
- Registry item: https://uiception.com/r/testimonials-section-v3.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://uiception.com/r/testimonials-section-v3.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: `button`
## Files
### `registry/new-york/blocks/testimonials-section-v3/page.tsx`
```tsx
import TestimonialsSectionV3 from "./components/testimonials-section-v3"
export default function Page() {
return
}
```
### `registry/new-york/blocks/testimonials-section-v3/components/testimonials-section-v3.tsx`
```tsx
import TestimonialGrid from "./testimonial-grid"
export default function TestimonialsSectionV3() {
return (
Explore Success Stories
)
}
```
### `registry/new-york/blocks/testimonials-section-v3/components/testimonial-grid.tsx`
```tsx
import { cn } from "@/lib/utils"
import TestimonialCard from "./testimonial-card"
import { testimonials } from "../lib/testimonials-content"
const cellClassNames = [
"sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:col-start-1 lg:row-start-1",
"lg:col-span-2 lg:col-start-2 lg:row-start-1",
"sm:max-lg:col-span-1 lg:col-start-2 lg:row-start-2",
"sm:max-lg:col-span-1 lg:col-start-3 lg:row-start-2",
] as const
export default function TestimonialGrid() {
return (
{testimonials.map((testimonial, index) => (
))}
)
}
```
### `registry/new-york/blocks/testimonials-section-v3/components/testimonial-card.tsx`
```tsx
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import CompanyLogo from "./company-logo"
import type { Testimonial } from "../lib/testimonials-content"
export default function TestimonialCard({
testimonial,
}: {
testimonial: Testimonial
}) {
return (
{testimonial.quote}
)
}
```
### `registry/new-york/blocks/testimonials-section-v3/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-v3/lib/testimonials-content.ts`
```ts
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 { VercelWordmark } from "@/components/ui/svgs/vercelWordmark"
import { VercelWordmarkDark } from "@/components/ui/svgs/vercelWordmarkDark"
import { ConvexWordmarkLight } from "@/components/ui/svgs/convexWordmarkLight"
import { ConvexWordmarkDark } from "@/components/ui/svgs/convexWordmarkDark"
export type SvgComponent = ComponentType>
export type CompanyLogo = {
name: string
light: SvgComponent
dark?: SvgComponent
}
export type Testimonial = {
id: string
quote: string
name: string
role: string
storyHref: string
logo: CompanyLogo
}
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",
role: "Head of Payments",
storyHref: "#",
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",
role: "VP Engineering",
storyHref: "#",
logo: {
name: "GitHub",
light: GithubWordmarkLight,
dark: GithubWordmarkDark,
},
},
{
id: "sarah-mitchell",
quote:
"Deploy previews changed how we ship. Every pull request gets a live URL and stakeholders review before anything hits production.",
name: "Sarah Mitchell",
role: "Director of Platform",
storyHref: "#",
logo: {
name: "Vercel",
light: VercelWordmark,
dark: VercelWordmarkDark,
},
},
{
id: "jordan-ellis",
quote:
"Real-time sync across our stack changed how we build. Our agents finally have one source of truth they can trust.",
name: "Jordan Ellis",
role: "Staff Engineer",
storyHref: "#",
logo: {
name: "Convex",
light: ConvexWordmarkLight,
dark: ConvexWordmarkDark,
},
},
]
```
### `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 };
```
### `components/ui/svgs/convexWordmarkLight.tsx`
```tsx
import type { SVGProps } from "react";
const ConvexWordmarkLight = (props: SVGProps) => (
);
export { ConvexWordmarkLight };
```
### `components/ui/svgs/convexWordmarkDark.tsx`
```tsx
import type { SVGProps } from "react";
const ConvexWordmarkDark = (props: SVGProps) => (
);
export { ConvexWordmarkDark };
```