Avatar Stack

Avatar Stack is a component that allows you to stack and overlap avatars.

Installation

npx love-ui@latest add avatar-stack

Usage

import { AvatarStack } from "@/components/avatar-stack"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"

<AvatarStack>
  <Avatar>
    <AvatarImage src="/avatar1.jpg" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/avatar2.jpg" />
    <AvatarFallback>SM</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/avatar3.jpg" />
    <AvatarFallback>KL</AvatarFallback>
  </Avatar>
</AvatarStack>

Features

Stack and overlap avatars
Customize the appearance with className
Optional hover animation to expand spacing
Configurable avatar size

Examples

With hover animation

"use client";

import { AvatarStack } from "../../../../../packages/avatar-stack";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <AvatarStack animate>
    <Avatar>
      <AvatarImage src="https://github.com/loveconnor.png" />
      <AvatarFallback>CL</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://avatars.githubusercontent.com/u/91501317?v=4" />
      <AvatarFallback>MO</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/loveconnor.png" />
      <AvatarFallback>CL</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://avatars.githubusercontent.com/u/91501317?v=4" />
      <AvatarFallback>MO</AvatarFallback>
    </Avatar>
  </AvatarStack>
);

export default Example;

Props

AvatarStack

Prop	Type	Default	Description
`children`	`ReactNode`	-	Avatar components to stack
`className`	`string`	-	Additional CSS classes
`animate`	`boolean`	`false`	Enable hover animation to expand spacing
`size`	`number`	`40`	Size of each avatar in pixels

Roadmap Cursor