# Testimonials

Testimonials is a ready-made neobrutalist section (block) from Cruise UI, built from its components. A testimonials block: quote cards with Avatar, name, role or location and a read-only Rating, in a grid (one card can be featured in --primary) or as a single large quote.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/cruise-testimonials
```

Import: `import { CruiseTestimonials } from "@/components/cruise/blocks/testimonials";`

## When to use

Social proof on landing, pricing and product pages.

## When not to

Made-up quotes. Use real customers' words, with their permission.

## Example (React)

```tsx
import { CruiseTestimonials } from "@/components/cruise/blocks/testimonials";

export default function TestimonialsExample() {
  return (
    <div className="flex flex-col gap-12">
      <CruiseTestimonials
        title="Loved across Naija"
        items={[
          { name: "Ada Okafor", role: "Shop owner, Yaba", quote: "Orders doubled the month we switched. My customers say the site feels like our shop.", rating: 5, featured: true },
          { name: "Tunde Bello", role: "Founder, Ibadan", quote: "Setup took an afternoon. Everything works on my customers' phones.", rating: 5 },
          { name: "Ngozi Eze", role: "Designer, Abuja", quote: "Bold without being messy. Clients remember it.", rating: 4 },
        ]}
      />
      <CruiseTestimonials
        variant="single"
        title="One customer's story"
        headingLevel={3}
        items={[{ name: "Musa Garba", role: "Event planner, Port Harcourt", quote: "We sold out the first weekend.", rating: 5 }]}
      />
    </div>
  );
}
```

## Props: CruiseTestimonials

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title?` | `ReactNode` | `"What people say"` | — |
| `intro?` | `ReactNode` | — | — |
| `items?` | `CruiseTestimonial[]` | `DEFAULT_ITEMS` | — |
| `variant?` | `"single" \| "grid"` | `"grid"` | — |
| `headingLevel?` | `2 \| 3` | `2` | — |
| `className?` | `string` | — | — |

## Accessibility

- Each quote is a <figure> with the person in its <figcaption>.
- Ratings read as "Ada Okafor's rating: 5 out of 5".
- The featured card uses .on-primary so its text stays dark.