# Testimonials grid

> A social proof section: a grid of customer quotes and reviews. It can use columns of uneven height and still be read in the order you give.

Facade UI item `testimonials-grid` (block, section).
Docs page: https://facadeui.dev/components/testimonials-grid · Registry JSON: https://facadeui.dev/r/testimonials-grid.json

## Install

```bash
npx shadcn@latest add @facade/testimonials-grid
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/testimonials-grid.json`. The CLI also installs what it needs: @facade/container, @facade/section, @facade/section-header, @facade/testimonial, @facade/types, @facade/utils.

Files: `components/sections/testimonials-grid.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/testimonials-grid-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { TestimonialsGrid } from "@/components/sections/testimonials-grid"

import { QUOTES } from "./content"

export function Demo() {
  return (
    <TestimonialsGrid
      eyebrow="Customers"
      title="What teams say"
      description="Masonry columns flow in document order, so reading order still matches what you see."
      items={QUOTES}
      columns="masonry"
    />
  )
}
```

## Props

### TestimonialsGridProps

Extends SectionBaseProps, ListSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `TestimonialItem[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `image` | `ImageComponent` |  |  |
| `columns` | `2 \| 3 \| "masonry"` | `3` | `masonry` lets columns have uneven heights, so quotes of different lengths leave no gaps. |
| `variant` | `"card" \| "plain"` | `"card"` |  |
| `align` | `"start" \| "center"` | `"center"` |  |