Skip to main content

Avatar

An image element with a fallback for representing the user.

@figueroaignacioUS
1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4

5export function Default() {
6  return (
7    <Avatar>
8      <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
9      <Avatar.Fallback>US</Avatar.Fallback>
10    </Avatar>
11  );
12}

Installation

pnpm dlx mateui add avatar

Anatomy

1import { Avatar } from '@/components/ui/avatar';
1<Avatar>
2  <Avatar.Image src="https://github.com/shadcn.png" />
3  <Avatar.Fallback>CN</Avatar.Fallback>
4</Avatar>

Variants

Default

@figueroaignacioUS
1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4

5export function Default() {
6  return (
7    <Avatar>
8      <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
9      <Avatar.Fallback>US</Avatar.Fallback>
10    </Avatar>
11  );
12}

Sizes

You can change the size via the size prop.
@figueroaignacioFI@figueroaignacioFI@figueroaignacioUS
1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4

5export function Sizes() {
6  return (
7    <div className="flex items-center gap-4">
8      <Avatar size="sm">
9        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
10        <Avatar.Fallback>FI</Avatar.Fallback>
11      </Avatar>
12

13      <Avatar size="md">
14        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
15        <Avatar.Fallback>FI</Avatar.Fallback>
16      </Avatar>
17

18      <Avatar size="lg">
19        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
20        <Avatar.Fallback>US</Avatar.Fallback>
21      </Avatar>
22    </div>
23  );
24}

With Fallback

If the image takes time to load or fails, the fallback text (usually initials) will be displayed.
@figueroaignacioFIFI
1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4

5export function WithFallback() {
6  return (
7    <div className="flex gap-4">
8      {/* Broken image link to test fallback */}
9      <Avatar>
10        <Avatar.Image src="https://github.com/figueroaignacio.pn" alt="@figueroaignacio" />
11        <Avatar.Fallback>FI</Avatar.Fallback>
12      </Avatar>
13

14      {/* No image provided to test fallback */}
15      <Avatar>
16        <Avatar.Fallback className="bg-primary text-primary-foreground">FI</Avatar.Fallback>
17      </Avatar>
18    </div>
19  );
20}

Avatar Group

Display multiple avatars overlapping using Avatar.Group.
@figueroaignacioFI@nicvazquezdevNV@ManuZarragaMZ+3
1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4

5export function AvatarGroup() {
6  return (
7    <Avatar.Group>
8      <Avatar>
9        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
10        <Avatar.Fallback>FI</Avatar.Fallback>
11      </Avatar>
12      <Avatar>
13        <Avatar.Image src="https://github.com/nicvazquezdev.png" alt="@nicvazquezdev" />
14        <Avatar.Fallback>NV</Avatar.Fallback>
15      </Avatar>
16      <Avatar>
17        <Avatar.Image src="https://github.com/ManuZarraga.png" alt="@ManuZarraga" />
18        <Avatar.Fallback>MZ</Avatar.Fallback>
19      </Avatar>
20      <Avatar>
21        <Avatar.Fallback className="bg-muted text-muted-foreground">+3</Avatar.Fallback>
22      </Avatar>
23    </Avatar.Group>
24  );
25}

API Reference

Avatar

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Visual size of avatar
classNamestring-Additional CSS classes
PreviousAccordionNextBadge