# Testimonials 01

> A single testimonial with quote, avatar, author name and role.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/testimonials-01).

- Page, with a live preview: https://shadcn.exchange/r/flx/testimonials-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/testimonials-01-light-f83145f1315bae1a.png
- Registry item: https://ui.flexnative.com/r/testimonials-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/testimonials-01.json
```

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

## Dependencies

- Registry items: `avatar`

## Files

### `registry/blocks/testimonials/testimonials-01/testimonials-01.tsx`

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export interface Testimonials01Props {
  quote: string
  author: {
    name: string
    role: string
    avatar: {
      src?: string
      alt?: string
      fallback: string
    }
  }
}

export function Testimonials01({
  quote,
  author,
}: Readonly<Testimonials01Props>) {
  return (
    <div className="mx-auto flex min-h-80 max-w-3xl flex-col items-center justify-center gap-8 rounded-3xl text-center">
      <p className="text-xl leading-tight font-medium tracking-tight md:text-[2rem]">
        "{quote}"
      </p>

      <div className="flex items-center justify-center gap-4">
        <Avatar size="default" className="md:data-[size=default]:size-10">
          <AvatarImage
            src={author.avatar.src}
            alt={author.avatar.alt ?? author.name}
          />
          <AvatarFallback>{author.avatar.fallback}</AvatarFallback>
        </Avatar>

        <div className="flex flex-col items-start text-left">
          <p className="text-sm font-semibold md:text-base">{author.name}</p>
          <p className="text-muted-foreground text-xs md:text-sm">
            {author.role}
          </p>
        </div>
      </div>
    </div>
  )
}
```

### `registry/blocks/testimonials/testimonials-01/testimonials-01-example.tsx`

```tsx
import {
  Testimonials01,
  type Testimonials01Props,
} from './testimonials-01'

export const values = {
  quote:
    'Switching to these blocks gave our team a cleaner system and helped us launch polished pages in a fraction of the time.',
  author: {
    name: 'Sophie Carter',
    role: 'Product Design Lead at Northstar',
    avatar: {
      src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80',
      alt: 'alt image',
      fallback: 'SC',
    },
  },
} satisfies Testimonials01Props

export function Testimonials01Example() {
  return <Testimonials01 quote={values.quote} author={values.author} />
}
```