# Testimonial

> A customer-quote card with a serif pull-quote, avatar initials, and attribution.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/testimonial).

- Page, with a live preview: https://shadcn.exchange/r/quill/testimonial
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/testimonial-light-ae20adc99b49f0de.png
- Registry item: https://www.quilldesignsystem.com/r/testimonial.json
- Categories: marketing, content
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/testimonial.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Notes from the registry

A customer-quote card with a serif pull-quote, avatar initials, and attribution. Do: Pair every quote with a real name, role, and organization — an anonymous quote reads as unverifiable. Don't: Ship a testimonial with no attribution, or attribution too small/muted to actually read. Use team-section when you're introducing people, not quoting what a customer said about the product. Use stats-band when the proof point is a number, not a quote.

## Files

### `registry/blocks/testimonial.tsx`

```tsx
/** A customer-quote card with a serif pull-quote, avatar initials, and attribution. */
export function Testimonial() {
  return (
    <figure className="flex w-full max-w-[520px] flex-col gap-6 rounded-xl bg-card p-8 ring-1 ring-foreground/10 text-foreground">
      <blockquote className="font-heading text-2xl leading-snug text-pretty">
        “Quill let our team ship consistent, accessible screens in days — the token
        foundation means design and code never drift.”
      </blockquote>
      <figcaption className="flex items-center gap-3">
        <div className="flex size-10 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground">
          RP
        </div>
        <div className="flex flex-col">
          <span className="text-sm font-medium">Riley Park</span>
          <span className="text-sm text-muted-foreground">Head of Design, Northwind</span>
        </div>
      </figcaption>
    </figure>
  )
}
```