Animated Avatar Group

Renders a stack of overlapping avatars with a visible count and hidden count indicator. It animates scale and position on hover. Use when displaying a group of avatars with potential overflow.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/animated-avatar-group

npx layro-cli add @educlopez/animated-avatar-group

npx layro-cli add @educlopez/animated-avatar-group

bunx layro-cli add @educlopez/animated-avatar-group

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useState } from "react";

export type AvatarData = {
  src: string;
  alt: string;
  href?: string;
};

export type AnimatedAvatarGroupProps = {
  avatars: AvatarData[];