Avatar

---
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar"
import avatar from "@/assets/avatar-sil-veltman.webp"
---

<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar>
    <AvatarImage src={avatar} alt="@silveltm" />
    <AvatarFallback>SV</AvatarFallback>
  </Avatar>
  <Avatar size="lg">
    <AvatarImage src={avatar} alt="@silveltm" />
    <AvatarFallback>SV</AvatarFallback>
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>FD</AvatarFallback>
  </Avatar>
  <AvatarGroup class="*:grayscale">
    <Avatar>
      <AvatarImage src={avatar} alt="@silveltm" />
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src={avatar} alt="@silveltm" />
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src={avatar} alt="@silveltm" />
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
  </AvatarGroup>
</div>

Installation

npx shadcn@latest add @fulldev/avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="Team member" />
  <AvatarFallback>TM</AvatarFallback>
</Avatar>

Composition

Use the following composition to build an Avatar:

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Use the following composition to build an AvatarGroup:

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Examples

Fallback

Use AvatarFallback when an image is unavailable or intentionally omitted.

Group

Use AvatarGroup when you need overlapping participant or collaborator lists.

---
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"
import avatar from "@/assets/avatar-sil-veltman.webp"
---

<AvatarGroup>
  <Avatar>
    <AvatarImage src={avatar} alt="Sil Veltman" />
    <AvatarFallback>SV</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src={avatar} alt="Teammate" />
    <AvatarFallback>TM</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

Notes

Always include AvatarFallback so initials or placeholder content remain visible when the image fails to load.
Use size variants on Avatar instead of custom width and height classes when possible.

API Reference

See the GitHub source code for more information on props.

Sidebar

Search