# Testimonial wall (goodtabs UI)

A masonry wall of short quotes in balanced columns, one to three wide.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/testimonial-wall.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/testimonial-wall`

## Usage

```tsx
import { TestimonialWall } from "@/components/testimonial-wall"

<TestimonialWall quotes={[{ quote: "Calm, dense and fast.", name: "Ines Calloway", role: "Founder" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| quotes | `{ quote: string; name: string; role?: string }[]` |  | Short quotes. Lengths can differ. |
| columns | `2 | 3` | `3` | Columns from md up. One column on phones, two from sm. |

## When to use

- A page of six or more short quotes
- When quotes vary in length and a rigid grid would leave gaps
- Under a features section as proof

## When not to use

- One standout quote, which belongs in testimonial-spotlight
- Quotes with avatars and sources, where testimonial-card fits
- Fewer than four quotes

## Notes for agents

- Server component using CSS columns; order reads down each column, not across
- Cards are figure elements with blockquote and figcaption, using bg-card and a hairline border
- Keep each quote to about two sentences or the wall gets tall
- Use real, permissioned quotes only; demos are fictional

Docs: https://ui.goodtabs.co/components/testimonial-wall