# Testimonial

> A quote with the name of the person who said it, and an optional star rating that screen readers announce as text.

Facade UI item `testimonial` (ui, atom).
Docs page: https://facadeui.dev/components/testimonial · Registry JSON: https://facadeui.dev/r/testimonial.json

## Install

```bash
npx shadcn@latest add @facade/testimonial
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/testimonial.json`. The CLI also installs what it needs: lucide-react@^1.47.0, @facade/types, @facade/utils.

Files: `components/ui/testimonial.tsx`

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

## Usage

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

```tsx
import { Testimonial } from "@/components/ui/testimonial"

export function Demo() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <Testimonial
        rating={5}
        quote="We replaced three hand-rolled landing pages in an afternoon. The sections dropped straight into our existing theme."
        author={{ name: "Rosa Iqbal", title: "Head of Design, Northwind" }}
      />
      <Testimonial
        variant="plain"
        size="lg"
        quote="The accessibility work is already done, which is the part we always ran out of time for."
        author={{ name: "Tomas Lindqvist", title: "Engineering lead, Contoso" }}
      />
    </div>
  )
}
```

## Props

### TestimonialProps

Extends TestimonialItem.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `image` | `ImageComponent` |  |  |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `variant` | `"card" \| "plain"` | `"card"` | `card` adds a border and background. `plain` has neither, for a single featured quote. |
| `className` | `string` |  |  |
| `children` | `ReactNode` |  |  |