Avatar

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 
3export default function AvatarGroup() {
4  return (
5    <div className="[&_*]:data-[slot=avatar]:ring-background flex -space-x-2 [&_*]:data-[slot=avatar]:ring-2">
6      <Avatar>
7        <AvatarImage src="https://www.tobybelhome.com/user.png" alt="@shadcn" />
8        <AvatarFallback>CN</AvatarFallback>
9      </Avatar>
10      <Avatar>
11        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
12        <AvatarFallback>CN</AvatarFallback>
13      </Avatar>
14      <Avatar>
15        <AvatarImage
16          src="https://images.unsplash.com/photo-1654110455429-cf322b40a906?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=300"
17          alt="@shadcn"
18        />
19        <AvatarFallback>CN</AvatarFallback>
20      </Avatar>
21    </div>
22  );
23}