Landing Page Social Proof Component
Use this to show proof of existing, happy customers & increase trust.
Shows social proof with avatars, number of users and an optional rating.





99+
from 99+ happy users
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.