Social Proof

Data Display

Overlapping avatars that pop in sequence beside a proof line.

NKALGHIJ

Joined by 2,400+ developers

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/social-proof.json

Or install manually

1. Install dependencies
```
pnpm add motion clsx tailwind-merge
```
2. Copy the component source into components/library/social-proof.tsx

Props

Prop	Type	Default	Description
avatars	string[]	-	Initials to show, in order.
text	string	-	The proof line beside them.

Accessibility

The proof line is real text, so the claim is never carried by avatars alone.
Initials scale with the user's type size rather than being baked into images.
Entrance stagger is short enough not to delay the message meaningfully.

Dependencies

motionclsxtailwind-merge