Usage

import { LandingSocialProof } from '@/components/landing/social-proof/LandingSocialProof';

const avatarItems = [
  {
    imageSrc: '/static/images/people/1.webp',
    name: 'John Doe',
  },
  {
    imageSrc: '/static/images/people/2.webp',
    name: 'Jane Doe',
  },
  {
    imageSrc: '/static/images/people/3.webp',
    name: 'Alice Doe',
  },
  {
    imageSrc: '/static/images/people/4.webp',
    name: 'Bob Doe',
  },
  {
    imageSrc: '/static/images/people/5.webp',
    name: 'Eve Doe',
  },
];

<LandingSocialProof numberOfUsers={99} avatarItems={avatarItems} />

Examples

With Rating

99+

from 99+ happy users

With Custom Suffix Text

99+

from 99+ experienced developers

Without Hover Animation

99+

from 99+ happy users

With Primary Image Cta

Product of the Day1st

Landing page in minutes

Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.

Buy now

12k+

from 12k+ happy users

API Reference

Prop Name	Prop Type	Required	Default
avatarItems	`SocialProofItem[]`	Yes	-
numberOfUsers	`number`	Yes	-
suffixText	`string`	No	'happy users'
showRating	`boolean`	No	-
disableAnimation	`boolean`	No	-

export interface SocialProofItem {
  imageSrc: string;
  name: string;
}

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.