Avatar

1import { Avatar, AvatarFallback, AvatarImage } from "passport-ui";

1<Avatar>
2  <AvatarImage src="https://placehold.co/32x32" alt="Avatar" />
3  <AvatarFallback>CN</AvatarFallback>
4</Avatar>
5 
6{/* With fallback when image fails */}
7<Avatar>
8  <AvatarImage src="" alt="Avatar" />
9  <AvatarFallback>JD</AvatarFallback>
10</Avatar>
11 
12{/* Stacked avatars */}
13<div className="flex -space-x-3">
14  <Avatar className="ring-2 ring-border">
15    <AvatarImage src="https://placehold.co/32x32" alt="Avatar" />
16    <AvatarFallback>JD</AvatarFallback>
17  </Avatar>
18  <Avatar className="ring-2 ring-border">
19    <AvatarImage src="" alt="Avatar" />
20    <AvatarFallback>AS</AvatarFallback>
21  </Avatar>
22</div>