# Testimonial spotlight (goodtabs UI)

One quote set large and centered, with the name and role underneath.

## Install

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

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

## Usage

```tsx
import { TestimonialSpotlight } from "@/components/testimonial-spotlight"

<TestimonialSpotlight quote="We stopped arguing about buttons." name="Mira Okafor" role="Design engineer" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| quote | `string` |  | The quote, plain text, no quote marks. |
| name | `string` |  | Who said it. |
| role | `string` |  | Their role, one short line. |
| size | `"sm" | "default"` | `"default"` | Quote scale. sm fits a card or narrow column. |
| children | `ReactNode` |  | Optional slot under the name, for a link or a logo. |

## When to use

- One strong voice between two sections
- A case study header
- When a single line carries the argument

## When not to use

- Several quotes at once, where a wall fits
- Long paragraphs, which read badly at this size
- Quotes without permission

## Notes for agents

- Server component, a figure with blockquote and figcaption
- Default size is text-2xl to text-4xl; use sm in cards
- Text is balanced and centered with max-w-3xl
- Demo people are fictional; replace with real, permissioned quotes

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