Landing Page Social Proof Component
- Updated on
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.