Avatar

1<Avatar>
2  <AvatarImage src="https://github.com/vercel.png" alt="Vercel" />
3  <AvatarFallback>VC</AvatarFallback>
4</Avatar>

1<Avatar>
2  <AvatarImage src="/invalid-url.png" alt="User" />
3  <AvatarFallback>JD</AvatarFallback>
4</Avatar>

1<Avatar className="h-8 w-8">
2  <AvatarImage src="..." alt="Small" />
3  <AvatarFallback className="text-xs">SM</AvatarFallback>
4</Avatar>
5
6<Avatar className="h-16 w-16">
7  <AvatarImage src="..." alt="Large" />
8  <AvatarFallback className="text-lg">LG</AvatarFallback>
9</Avatar>

1<div className="flex -space-x-4">
2  <Avatar className="border-2 border-background">
3    <AvatarImage src="..." alt="User 1" />
4    <AvatarFallback>U1</AvatarFallback>
5  </Avatar>
6  <Avatar className="border-2 border-background">
7    <AvatarImage src="..." alt="User 2" />
8    <AvatarFallback>U2</AvatarFallback>
9  </Avatar>
10  <Avatar className="border-2 border-background">
11    <AvatarFallback>+5</AvatarFallback>
12  </Avatar>
13</div>

1<Avatar>
2  <AvatarFallback className="bg-primary text-primary-foreground">AB</AvatarFallback>
3</Avatar>
4<Avatar>
5  <AvatarFallback className="bg-success text-success-foreground">CD</AvatarFallback>
6</Avatar>

1<div className="relative">
2  <Avatar>
3    <AvatarImage src="..." alt="Online User" />
4    <AvatarFallback>ON</AvatarFallback>
5  </Avatar>
6  <span className="absolute bottom-0 right-0 h-3 w-3 border-2 border-background bg-success" />
7</div>