# Testimonial card (goodtabs UI)

A quote with the person behind it, plus a grid that shares hairlines between cards.

## Install

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

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

## Usage

```tsx
import { TestimonialCard, TestimonialGrid } from "@/components/ui/testimonial-card"

<TestimonialGrid>
  <TestimonialCard quote="Nothing needed restyling." author={{ name: "Mira Okafor", role: "Design engineer" }} source="via X" />
</TestimonialGrid>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| quote | `string` |  | The quote as plain text, no quote marks. |
| author | `{ name: string; role?: string; image?: string }` |  | Who said it. Initials show when there is no image. |
| source | `string` |  | One mono line on the right, for example "via X". |
| columns | `2 | 3` | `3` | On TestimonialGrid: columns from the sm breakpoint up. |

## When to use

- A social proof section on a landing page, three to six quotes
- A single quote next to a feature or a pricing table
- Case studies and changelogs where one line from a customer carries the point

## When not to use

- Long reviews with ratings and dates; use a review list or a table
- Quotes that need a logo or a product shot; build a feature section instead
- When you only have one or two quotes and a grid would look sparse

## Notes for agents

- Server component on shadcn's Card and Avatar; pass author.image for a photo, otherwise initials render
- No quote marks are drawn: the figure and blockquote carry the meaning for screen readers
- TestimonialGrid strips the cards' radius and ring and draws gap-px hairlines; put only TestimonialCards in it
- Keep quotes to two or three lines; the grid does not equalise heights beyond each row

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