A social proof row with overlapping avatars and supporting text.
import { AvatarSocialProof } from "@/components/ui/avatar-social-proof";
export const DEMO_PEOPLE = {
gagandeepKang: "Gagandeep Kang",
janakiAmmal: "Janaki Ammal",
kalpanaChawla: "Kalpana Chawla",
rajReddy: "Raj Reddy",
srinivasaRamanujan: "Srinivasa Ramanujan",
vikramSarabhai: "Vikram Sarabhai",
} as const;
const WHITESPACE_PATTERN = /\s+/;
export const getFirstName = (name: string): string =>
name.trim().split(WHITESPACE_PATTERN)[0] ?? name;
const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;
const DEVELOPERS = [
{
id: "janaki",
name: getFirstName(DEMO_PEOPLE.janakiAmmal),
palette: BLUE_PALETTE,
},
{
id: "vikram",
name: getFirstName(DEMO_PEOPLE.vikramSarabhai),
palette: ["#fff0e2", "#fa9769"],
},
{
id: "kalpana",
name: getFirstName(DEMO_PEOPLE.kalpanaChawla),
palette: ["#e7fbe8", "#9ce786"],
},
{
id: "srinivasa",
name: getFirstName(DEMO_PEOPLE.srinivasaRamanujan),
palette: ["#f4e7ff", "#c994ec"],
},
] as const;
export function AvatarSocialProofExample() {
return (
<div className="flex flex-col items-center gap-4">
<AvatarSocialProof avatars={DEVELOPERS}>
Joined by <strong className="text-foreground">500+</strong> developers.
</AvatarSocialProof>
<AvatarSocialProof avatars={DEVELOPERS.slice(0, 3)} variant="default">
Trusted by <strong className="text-foreground">100K+</strong> users.
</AvatarSocialProof>
</div>
);
}
export default AvatarSocialProofExample;