# Testimonials component 18

> Basic carousel testimonials with badge design, avatar displays, and simple customer feedback structure

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/testimonials-component-18).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/testimonials-component-18
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/testimonials-component-18-light-2397494c4a86a3c0.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/testimonials-component-18.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/testimonials-component-18.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: `carousel`, `badge`, `avatar`

## Files

### `src/registry/new-york/blocks/marketing-ui/testimonials-component/testimonials-component-18/page.tsx`

```tsx
import TestimonialsComponent from '@/registry/new-york/components/blocks/testimonials-component-18/testimonials-component-18'
import type { TestimonialItem } from '@/registry/new-york/components/blocks/testimonials-component-18/testimonials-component-18'

const testimonials: TestimonialItem[] = [
  {
    name: 'Craig Bator',
    role: 'CEO & Co Founder',
    company: 'Zendesk',
    avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png?width=40&height=40&format=auto',
    rating: 5,
    content: "I've been using shadcn/studio for a year now and it's made managing my finances so much easier and quick."
  },
  {
    name: 'Martin Dorwart',
    role: 'Product manager',
    company: 'Orbit',
    avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png?width=40&height=40&format=auto',
    rating: 4,
    content: "With shadcn/studio, I can easily track my investments and see how they're performing in real-time."
  },
  {
    name: 'Sarah Johnson',
    role: 'Lead Designer',
    company: 'Figma',
    avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png?width=40&height=40&format=auto',
    rating: 5,
    content:
      "The UI components are beautifully designed and incredibly easy to customize. It's transformed our design workflow."
  },
  {
    name: 'Alex Chen',
    role: 'Frontend Developer',
    company: 'Vercel',
    avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-4.png?width=40&height=40&format=auto',
    rating: 4,
    content:
      'shadcn/studio has saved us countless hours in development. The component library is comprehensive and well-documented.'
  }
]

const TestimonialsComponentPage = () => {
  return <TestimonialsComponent testimonials={testimonials} />
}

export default TestimonialsComponentPage
```

### `src/registry/new-york/components/blocks/testimonials-component-18/testimonials-component-18.tsx`

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'
import { Badge } from '@/registry/new-york/ui/badge'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious
} from '@/registry/new-york/ui/carousel'

export type TestimonialItem = {
  name: string
  role: string
  company: string
  avatar: string
  rating: number
  content: string
}

type TestimonialsComponentProps = {
  testimonials: TestimonialItem[]
}

const TestimonialsComponent = ({ testimonials }: TestimonialsComponentProps) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <Carousel
        className='mx-auto grid max-w-7xl grid-cols-1 items-center gap-11 px-4 sm:px-6 md:grid-cols-2 lg:px-8'
        opts={{
          align: 'start',
          slidesToScroll: 1
        }}
      >
        {/* Left Content */}
        <div className='space-y-4 md:space-y-16'>
          <div className='space-y-4'>
            <Badge variant='outline' className='text-sm font-normal'>
              Testimonials
            </Badge>
            <h2 className='text-2xl font-semibold sm:text-3xl lg:text-4xl'>
              Trusted by leaders from various industries
            </h2>
            <p className='text-muted-foreground text-xl'>
              From career changes to dream jobs, here&apos;s how Shadcn Studio helped.
            </p>
          </div>

          <div className='flex items-center gap-5'>
            <CarouselPrevious
              size='icon'
              variant='default'
              className='disabled:bg-primary/10 disabled:text-primary static translate-y-0 disabled:opacity-100'
            />
            <CarouselNext
              size='icon'
              variant='default'
              className='disabled:bg-primary/10 disabled:text-primary static translate-y-0 disabled:opacity-100'
            />
          </div>
        </div>

        {/* Right Testimonial Carousel */}
        <div className='relative'>
          <CarouselContent className='sm:-ml-6'>
            {testimonials.map((testimonial, index) => (
              <CarouselItem key={index} className='sm:pl-6'>
                <div className='flex flex-col gap-10'>
                  <div className='space-y-2'>
                    <p className='h-14 text-8xl'>&ldquo;</p>
                    <p className='text-muted-foreground text-xl font-medium sm:text-2xl lg:text-4xl'>
                      {testimonial.content}
                    </p>
                  </div>
                  <div className='flex items-center gap-2'>
                    <Avatar className='size-12 md:size-15'>
                      <AvatarImage src={testimonial.avatar} alt={testimonial.name} />
                      <AvatarFallback className='text-sm'>
                        {testimonial.name
                          .split(' ', 2)
                          .map(n => n[0])
                          .join('')}
                      </AvatarFallback>
                    </Avatar>

                    <div className='flex-1'>
                      <h4 className='font-medium md:text-xl'>{testimonial.name}</h4>
                      <p className='text-muted-foreground md:text-xl'>
                        {testimonial.role} at {testimonial.company}
                      </p>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </div>
      </Carousel>
    </section>
  )
}

export default TestimonialsComponent
```