import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/components/ui/avatar';
import {
AvatarGroup,
AvatarGroupTooltip,
} from '@/components/ui/avatar-group';
const AVATARS = [
{
src: 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg',
fallback: 'SK',
tooltip: 'Skyleen',
},
{
src: 'https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg',
fallback: 'CN',
tooltip: 'Shadcn',
},
{
src: 'https://cdn.21st.dev/assets/mirror/7b/7bc0cc1e66037830ac2bc11ecd407164debb9c96d61ab57fd33e8c5ac0342f46.jpg',
fallback: 'AW',
tooltip: 'Adam Wathan',
},
{
src: 'https://cdn.21st.dev/assets/mirror/bd/bda00209d3375399bf57be3d3ac7aa59d1b293e08baf486a141fcd3a612184bf.jpg',
fallback: 'GR',
tooltip: 'Guillermo Rauch',
},
{
src: 'https://cdn.21st.dev/assets/mirror/e6/e6e12f0e31f875e51a24c5ba62eac783c0361815bc2eba5eef6f9c8ca1bf0466.jpg',
fallback: 'JH',
tooltip: 'Jhey',
},
];
export const AvatarGroupDemo = () => {
return (
<AvatarGroup className="h-12 -space-x-3">
{AVATARS.map((avatar, index) => (
<Avatar key={index} className="size-12 border-3 border-background">
<AvatarImage src={avatar.src} />
<AvatarFallback>{avatar.fallback}</AvatarFallback>
<AvatarGroupTooltip>
<p>{avatar.tooltip}</p>
</AvatarGroupTooltip>
</Avatar>
))}
</AvatarGroup>
);
};
export default AvatarGroupDemo;Part of Animate UI — browse the full library on 21st.dev.