Avatar Circles Stack

effects

Overlapping team avatar circles with elevation hover states.

#avatar#circles#team#stack#social

Live Interactive Preview

+99

Component Source Code

Select language in the dropdown

AvatarCircles.tsx

1'use client';
2
3import React from 'react';
4
5export default function AvatarCircles() {
6  const users = [
7    { initials: 'AK', bg: 'bg-blue-600' },
8    { initials: 'SR', bg: 'bg-purple-600' },
9    { initials: 'EL', bg: 'bg-emerald-600' },
10    { initials: 'JD', bg: 'bg-amber-600' },
11  ];
12
13  return (
14    <div className="flex items-center -space-x-3 select-none p-4">
15      {users.map((user, idx) => (
16        <div
17          key={idx}
18          className={`flex h-11 w-11 items-center justify-center rounded-full ${user.bg} text-xs font-bold text-white ring-2 ring-white dark:ring-slate-900 shadow-md transition-transform hover:scale-110 hover:z-10`}
19        >
20          {user.initials}
21        </div>
22      ))}
23      <div className="flex h-11 w-11 items-center justify-center rounded-full bg-slate-800 text-xs font-bold text-white ring-2 ring-white dark:ring-slate-900 shadow-md">
24        +99
25      </div>
26    </div>
27  );
28}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/AvatarCircles.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import AvatarCirclesStack from '@/components/effects/AvatarCircles';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <AvatarCirclesStack />
7    </main>
8  );
9}