Social Proof
Social proof row of up to five overlapping avatars with initials fallback, next to a count label like 2,000 teams. Built in React for landing page heroes.
src/registry/ui/social-proof.tsx/r/social-proof.json
Installation#
bash
npx shadcn@latest add @minidev/social-proof
MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/social-proof.json
Usage#
tsx
import { SocialProof } from "@/components/ui/social-proof"
export function Example() {
return (
<SocialProof countLabel="2,400+ teams building with MiniDev" people={[{ name: "Ada" }, { name: "Lin" }, { name: "Kai" }, { name: "Noa" }]} />
)
}
API reference#
| Prop | Type | Default |
|---|---|---|
countLabel | string | "Trusted by 2,400+ finance teams" |
people | { name: string; src?: string }[] | SAMPLE_PEOPLE |
className | string | - |
Dependencies#
npm
React only
Built from
Examples#
Related landing pages components#
Announcement BarSlim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.Blog CardLinked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.Case Study CardCase study card with the company name, a short headline and a large result metric, plus an optional up or down delta. Good for proof sections on landing pages.Cookie BannerFloating React cookie consent card fixed to the corner, with a short notice and Accept and Reject buttons. It is a labelled dialog for assistive tech.Cta BannerTailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.Faq ListAn FAQ section built on an accessible accordion. Pass question and answer pairs and each one expands in place, with keyboard support and a readable max width.
All Landing page sections for React and Tailwind