Content Display

Hover Avatar Group

겹쳐진 아바타가 호버 시 떠오르고 안내 말풍선을 보여주는 아바타 그룹입니다.

Preview

content display

Hover Avatar Group

compact people stack

Skyleen
Shadcn
Adam Wathan
Guillermo Rauch
Jhey
David Haz

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/avatar-group.json

Code

typescript
Copied
1import { AvatarGroup } from "@/components/avatar-group"23export default function Example() {4  return <AvatarGroup items={users} />5}

Props

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
itemsAvatarGroupItem[]-Avatar data.
maxnumber6Maximum visible avatars.
invertOverlapbooleantrueWhether the earlier avatars should visually sit above later avatars.
translatestring | number"-30%"Hover translation applied to the active avatar.
transitionTransitionspring 300/17Avatar hover transition.
tooltipTransitionTransitionspring 300/35Tooltip enter and exit transition.

Reference

Animate UI Avatar Group