# Testimonials

> Three testimonial sections — drifting dispatch columns, a rotating spotlight quote with filling progress dots, and a masonry wall whose cards expand into the longer story — all with initials avatars.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/testimonial-blocks
- Install: `npx shadcn@latest add @geturui-pro/testimonial-blocks`
- Dependencies: motion, lucide-react

## Variants

### Dispatch wall

Quote cards tagged by channel drift up and down in alternating columns (1, 2 or 3 by container width) behind a soft edge mask.

Install: `npx shadcn@latest add @geturui-pro/testimonial-blocks-dispatch-wall`

```tsx
import { DispatchWall } from "@/components/blocks/testimonial-blocks/dispatch-wall";

export default function Proof() {
  return (
    <DispatchWall
      heading="What support teams say"
      quotes={[
        { quote: "First-reply time fell from 3 hours to 22 minutes.", name: "Jonas Lindqvist", role: "CX Lead", company: "Northpaw", channel: "Support ticket" },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| quotes | `DispatchQuote[]` | — | { quote, name, role, company, initials?, channel? }. Defaults are sample content for fictional customers. |
| speed | `number` | 28 | Pixels per second; columns run at slightly different speeds. |
| height | `number` | 520 | Height of the scrolling window in pixels. |
| eyebrow / heading | `string` | — | Header copy. |
| className | `string` | — | Classes for the outer section. |

### Spotlight

One quote at a time in large display type: words blur in, the active dot fills as a progress bar, and arrows or dots switch by hand.

Install: `npx shadcn@latest add @geturui-pro/testimonial-blocks-spotlight`

```tsx
import { Spotlight } from "@/components/blocks/testimonial-blocks/spotlight";

export default function Proof() {
  return <Spotlight interval={7} quotes={quotes} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| quotes | `SpotlightQuote[]` | — | { quote, name, role, company, initials?, metric?: { value, label } }. |
| interval | `number` | 7 | Seconds each quote stays on screen. |
| autoPlay | `boolean` | true | Auto-advance; off under reduced motion and paused on hover or focus. |
| eyebrow | `string` | "Customer stories" | Label and carousel name. |
| className | `string` | — | Classes for the outer section. |

### Masonry

Masonry wall of quotes in mixed card styles — metric cards, volt-tinted cards and marked phrases — that expand in place to show the longer story.

Install: `npx shadcn@latest add @geturui-pro/testimonial-blocks-masonry`

```tsx
import { Masonry } from "@/components/blocks/testimonial-blocks/masonry";

export default function Proof() {
  return (
    <Masonry
      quotes={[
        {
          quote: "Setup took twelve minutes.",
          highlight: "twelve minutes",
          story: "I timed it because I did not believe the onboarding page.",
          name: "Felix Brandt",
          role: "Staff Engineer",
          company: "Ostrava Labs",
        },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| quotes | `MasonryQuote[]` | — | { quote, story?, name, role, company, initials?, highlight?, metric? }. Cards with a story get an expand button. |
| multiple | `boolean` | false | Allow more than one card open at once. |
| eyebrow / heading / subheading | `string` | — | Header copy. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Moving content pauses on hover and focus and has a visible Pause button; it does not move at all under reduced motion.
- The spotlight is a labelled carousel: arrow keys and buttons switch quotes, and it announces changes only when not auto-playing.
- Expandable cards use aria-expanded and aria-controls; duplicate marquee copies are aria-hidden.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.