184 Components
Magnetic Avatar Stack
CardsOverlapping user avatar stack with dynamic proximity spreading, spring lift on hover, and an animated floating tooltip.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/magnetic-avatar-stack.json"
Props
TypeScript props supported by <MagneticAvatarStack />.
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars | AvatarItem[] | — | Array of user avatar objects with name, src/fallback, and role. |
| max | number | 5 | Maximum avatars displayed before showing overflow badge. |
| size | "sm" | "md" | "lg" | "md" | Avatar circle size preset. |
| onSelect | (avatar: AvatarItem) => void | — | Callback fired when an avatar is clicked. |
Key Features
- Dynamic proximity spreading that gracefully fans out avatars when the stack is hovered.
- Spring-driven vertical elevation and scale boost on the hovered avatar.
- Automatic z-index adjustment preventing overlap clipping.
- Built-in floating tooltip with user name and role metadata.
- Overflow counter badge for large teams.
Keyboard & Accessibility
- Keyboard focusable buttons with descriptive aria-label attributes.
- Focus mirrors hover state to reveal tooltips for keyboard navigators.
- Prefe-reduced-motion compatibility.