import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { AvatarGroup, AvatarGroupTooltip } from "@/components/ui/avatar-group";
const AVATARS = [
{
src: "https://cdn.21st.dev/assets/localized/4dfcb3c259477ef1e2a067f1b2b27cd384e65c62e4b0fce9eed02608cb4a0027.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 function 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.