Docs
Social Proof Avatars
Social Proof Avatars
A component that displays user avatars with optional extra count and star ratings, ideal for showcasing social proof.
+70
+70 satisfied clients
5 stars
Installation
pnpm dlx shadcn@latest add to-setup
Usage
import { SocialProofAvatars } from "@/components/ui/social-proof-avatars";const avatars = [
{
alt: "Avatar 1",
src: "/images/components/avatar-proof/avatar-1.webp",
},
{
alt: "Avatar 2",
src: "/images/components/avatar-proof/avatar-2.webp",
},
...
];<SocialProofAvatars avatars={avatars} extraCount={70}>
<p className="whitespace-nowrap">
+70 <strong className="font-semibold">satisfied</strong> clients
</p>
</SocialProofAvatars>Props
social-proof-avatars props.
| Prop | Type | Description | Default |
|---|---|---|---|
| avatars | Avatar[] | Array of avatar objects containing src and alt properties. | - |
| extraCount | number | Number of extra avatars, displayed as a "+X" count. | - |
| className | string | Additional custom classes. | - |
| stars | boolean | Whether to display star ratings (default is true). | true |
| children | React.ReactNode | Any child elements to be rendered within the component. | - |
| props | React.HTMLAttributes<HTMLDivElement> | Additional HTML attributes for the wrapping div. | - |
Credits
The images are from
Spline.One