Hero Block Avatar Group

Put faces to your product. This React hero block features a prominent avatar group showing your team or community members, creating immediate human connection. Built with shadcn/ui Button, Badge, and Avatar components. The avatar group uses overlapping styling with a "+X more" indicator for larger teams. Names can optionally appear on hover. Great for building trust and showing the humans behind the product. Perfect for agencies, communities, open-source projects, or any product where team credibility matters.

Hero Block Avatar Group preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/hero-30.json

npx shadcn@latest add https://www.shadcn.io/registry/hero-30.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/hero-30.json

bunx shadcn@latest add https://www.shadcn.io/registry/hero-30.json

Related Components

FAQ