GodUI

Avatar Group

Overlapping avatars that fan apart on hover, with a +N overflow chip.

Ada
Carl
Eve
Gus
+2

Sizes

Ada
Carl
Eve
Gus
+2
Ada
Carl
Eve
Gus
+2
Ada
Carl
Eve
Gus
+2

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/avatar-group.json"

Usage

tsx
 
import { AvatarGroup } from "@godui/components";

<AvatarGroup
  avatars={[{ src: "/a.png", alt: "Ada" }, { fallback: "JO", alt: "Jo" }]}
  max={4}
/>;

Props

PropTypeDefaultDescription
avatarsAvatar[]List of { src?, alt?, fallback?, href? }.
maxnumber4Max shown before the +N chip.
size"sm" | "md" | "lg""md"Avatar size.
spreadOnHoverbooleantrueFan the stack apart on hover.

On this page

Built with GodUI

Beautifully crafted motion components for modern interfaces.

Star on GitHub