The Avatar Smart Group component is a versatile and reusable UI element designed to elegantly display a group of user profile images with interactive tooltips. It supports two layout variants — uniform, where all avatars are equal in size, and centered, where the middle avatar is highlighted to draw focus. Each avatar includes hover animations, smooth scaling effects, and customizable features such as size, overlap spacing, ring color, tooltip background, and hover scale intensity. Built with React and Tailwind CSS, it maintains a clean aesthetic while remaining highly configurable for any project — from team displays and contributor sections to community dashboards or collaboration tools. The component ensures a visually engaging and professional way to showcase team members or user groups.
"use client";
import { AvatarSmartGroup } from "@/components/ui/avatar-smart-group";
export default function AvatarSmartGroupDemo() {
const users = [
{
name: "Olivia Anderson",
role: "UI/UX Designer",
image: "https://randomuser.me/api/portraits/women/44.jpg",
},
{
name: "Liam Patel",
role: "Frontend Developer",
image: "https://randomuser.me/api/portraits/men/32.jpg",
},
{
name: "Sophia Nguyen",
role: "Project Manager",
image: "https://randomuser.me/api/portraits/women/68.jpg",
},
{
name: "Ethan Rodriguez",
role: "Marketing Lead",
image: "https://randomuser.me/api/portraits/men/76.jpg",
},
{
name: "Ava Thompson",
role: "Quality Engineer",
image: "https://randomuser.me/api/portraits/women/15.jpg",
},
];
return (
<div className="min-h-screen flex flex-col items-center justify-center space-y-12">
<div className="text-center">
<h1 className="text-3xl font-semibold mb-2">Avatar Smart Group Demo</h1>
<p className="text-gray-600">
Two styles — uniform or centered — with configurable size, hover, and tooltips.
</p>
</div>
{/* 🟢 Uniform Variant */}
<div className="space-y-2 text-center">
<h2 className="font-semibold text-lg">Uniform Variant</h2>
<AvatarSmartGroup users={users} variant="uniform" size={56} overlap={-12} />
</div>
{/* 🔵 Centered Variant */}
<div className="space-y-2 text-center">
<h2 className="font-semibold text-lg">Centered Variant</h2>
<AvatarSmartGroup
users={users}
variant="centered"
size={56}
sizeStep={12}
overlap={-14}
ringColor="ring-white"
hoverScale={1.15}
tooltipBg="bg-[#27F535] text-white"
/>
</div>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.