# Editorial testimonial section

A shadcn/ui split-pane testimonial section with customer portrait, vertical divider, editorial quote typography, and circular previous/next navigation.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** High-impact SaaS landing pages; Executive and enterprise software websites; Founders and product leadership case studies
- **Category:** Marketing · **Type:** Testimonials · **Style:** Minimal, Dark mode, Motion
- **See it:** [Live preview](https://www.craftui.space/docs/templates/testimonials-section-03) · [Screenshot](https://www.craftui.space/llms.md/preview/testimonials-section-03.320fb39f.jpg)

![Editorial testimonial section](https://www.craftui.space/llms.md/preview/testimonials-section-03.320fb39f.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/testimonials-section-03.json
```

This is a paid item (SEC-8R0ZYM): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import TestimonialsSection03 from "@/components/blocks/testimonials-section-03";

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

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `testimonials` | `TestimonialItem[]` | — | Customer testimonial items. If omitted, default sample stories are shown. If an empty array [] is passed, an empty state is displayed. |
| `title` | `string` | `"Customer Testimonials"` | Accessible title for screen readers. Defaults to "Customer Testimonials". |
| `autoPlayInterval` | `number \| false` | `false` | Optional auto-play delay in milliseconds. If omitted or false, auto-advance is disabled. |

It also accepts every `<section>` attribute (`className`, `id`, `aria-*` and so on).

### `TestimonialItem`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique identifier for the story. |
| `author` (required) | `TestimonialAuthor` | Author details including name, role, company and optional avatar. |
| `quote` (required) | `string` | Customer quote text. Displayed enclosed in large quotation marks. |

### `TestimonialAuthor`

| Field | Type | Description |
| --- | --- | --- |
| `name` (required) | `string` | The customer's full name, e.g. "Sam Davies". |
| `role` (required) | `string` | Their job title or role, e.g. "VP of Revenue Operations". |
| `company` (required) | `string` | Their company or organization, e.g. "Lattice Corp.". |
| `avatar` | `string` | Portrait photo URL in 3:4 ratio (3 width, 4 height). Rendered as a monochrome headshot. |

## Files

The install adds:

- `components/blocks/testimonials-section-03.tsx`

npm dependencies (installed for you): `lucide-react`, `motion`.