Avatar

An image element with a fallback for representing the user.

Preview

@shadcn CN @evilrabbit ER
@shadcn CN @maxleiter ML @evilrabbit ER

Installation

$npx maddex add Avatar

Usage

1<!-- @import { Avatar, AvatarFallback, AvatarImage } from ../../lib/components -->
2
3<div class="flex items-center gap-8">
4  <Avatar>
5    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
6    <AvatarFallback>CN</AvatarFallback>
7  </Avatar>
8
9  <Avatar>
10    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
11    <AvatarFallback>ER</AvatarFallback>
12  </Avatar>
13
14  <div class="flex -space-x-3 overflow-hidden p-1">
15    <Avatar class="inline-block border-2 border-background">
16      <AvatarImage src="https://github.com/shadcn.png" />
17      <AvatarFallback>CN</AvatarFallback>
18    </Avatar>
19    <Avatar class="inline-block border-2 border-background">
20      <AvatarImage src="https://github.com/maxleiter.png" />
21      <AvatarFallback>ML</AvatarFallback>
22    </Avatar>
23    <Avatar class="inline-block border-2 border-background">
24      <AvatarImage src="https://github.com/evilrabbit.png" />
25      <AvatarFallback>ER</AvatarFallback>
26    </Avatar>
27  </div>
28</div>