# Testimonial

- Page: <https://kznlabs.github.io/labsUI/components/testimonial>

## Testimonial (`testimonial`, block)

A large Quote with its author, and everyone else who agrees as an overlapping AvatarGroup. Server-safe.

- Install: `npx @kznlabs/labsui add testimonial`
- Docs: <https://kznlabs.github.io/labsUI/components/testimonial>
- Brings: avatar, avatar-group, platform, quote, text-swap, typewriter, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Testimonial>`: A large Quote carried by its author, with the crowd behind it as an AvatarGroup.
  - `author: string`: Who said it.
  - `children: ReactNode`: The quote.
  - `avatar?: string`: Author photo URL; initials show without one.
  - `lang?: string`: Language of the quote, e.g. "pl".
  - `others?: { alt: string; src?: string | undefined; id?: string | undefined; }[]`: Everyone else who agrees: the first few stack, the rest fold into `+N`.
  - `othersLabel?: ReactNode`: Line beside the stack, e.g. "Trusted by 2,400 streamers".
  - `subtitle?: string`: Line under the author, e.g. role and company.

### Usage

```tsx
<Testimonial author="Jane Cooper" subtitle="Moderator" others={fans} othersLabel="and 2,400 others">We replaced three bots with one dashboard.</Testimonial>
```

### Example: customer-quote.tsx

```tsx
import { Testimonial } from "@/components/blocks/testimonial";

const customers = ["Wade Warren", "Esther Howard", "Guy Hawkins", "Robert Fox"].map(
  (alt) => ({ alt }),
);

export function CustomerQuote() {
  return (
    <Testimonial
      author="Jane Cooper"
      subtitle="Head of Support, Northwind"
      avatar="/team/jane.png"
      others={customers}
      othersLabel="and 1,200 other teams"
    >
      We moved every ticket view into one dashboard and cut our reply time in half.
    </Testimonial>
  );
}
```