---
type: doc
title: Avatar
description: An image element with a fallback for representing the user.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/avatar/avatar-demo.astro"
---
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"
---

<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
  <Avatar>
    <AvatarImage
      src="https://github.com/shadcn.png"
      alt="@shadcn"
      class="grayscale"
    />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
    <AvatarBadge class="bg-green-600 dark:bg-green-800" />
  </Avatar>
  <AvatarGroup class="grayscale">
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
      <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <AvatarFallback>ER</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
  </AvatarGroup>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/avatar
```

## Usage

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

```astro
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```

`AvatarImage` renders Astro's `Image` from `astro:assets`, so `src` takes an
imported image or a URL. It renders nothing without `src`, and `AvatarFallback`
sits behind the image, so always include it for a missing or broken image.

## Composition

Use the following composition to build an `Avatar`:

```text
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge
```

Use the following composition to build an `AvatarGroup`:

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

## Basic

A basic avatar with an image and a fallback.

```astro title="src/components/examples/avatar/avatar-basic.astro"
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
---

<Avatar>
  <AvatarImage
    src="https://github.com/shadcn.png"
    alt="@shadcn"
    class="grayscale"
  />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```

## Badge

`AvatarBadge` sits at the bottom right of the avatar. Use `class` for custom
colors, such as `bg-green-600 dark:bg-green-800`.

```astro title="src/components/examples/avatar/avatar-badge.astro"
---
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
---

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge class="bg-green-600 dark:bg-green-800" />
</Avatar>
```

## Badge with Icon

```astro title="src/components/examples/avatar/avatar-badge-icon.astro"
---
import PlusIcon from "@lucide/astro/icons/plus"

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

<Avatar class="grayscale">
  <AvatarImage src="https://github.com/pranathip.png" alt="@pranathip" />
  <AvatarFallback>PP</AvatarFallback>
  <AvatarBadge>
    <PlusIcon />
  </AvatarBadge>
</Avatar>
```

## Avatar Group

```astro title="src/components/examples/avatar/avatar-group.astro"
---
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar"
---

<AvatarGroup class="grayscale">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <AvatarFallback>LR</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>
</AvatarGroup>
```

## Avatar Group Count

Use `AvatarGroupCount` to add a count to the group.

```astro title="src/components/examples/avatar/avatar-group-count.astro"
---
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"
---

<AvatarGroup class="grayscale">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <AvatarFallback>LR</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
```

## Avatar Group with Icon

```astro title="src/components/examples/avatar/avatar-group-count-icon.astro"
---
import PlusIcon from "@lucide/astro/icons/plus"

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

<AvatarGroup class="grayscale">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <AvatarFallback>LR</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>
    <PlusIcon />
  </AvatarGroupCount>
</AvatarGroup>
```

## Sizes

Use the `size` prop to change the size of the avatar.

```astro title="src/components/examples/avatar/avatar-size.astro"
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
---

<div class="flex flex-wrap items-center gap-2 grayscale">
  <Avatar size="sm">
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar size="lg">
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</div>
```

## Dropdown

Put the `Avatar` inside a `DropdownMenuTrigger` styled with `buttonVariants`.
See [Dropdown Menu](/astro/components/dropdown-menu/).

```astro title="src/components/examples/avatar/avatar-dropdown.astro"
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
---

<DropdownMenu>
  <DropdownMenuTrigger
    class={buttonVariants({
      variant: "ghost",
      size: "icon",
      class: "rounded-full",
    })}
  >
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-32">
    <DropdownMenuGroup>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Settings</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>
```

## RTL

```astro title="src/components/examples/avatar/avatar-rtl.astro"
---
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const translations = {
  en: {
    dir: "ltr",
    values: {
      moreUsers: "+3",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      moreUsers: "+٣",
    },
  },
  he: {
    dir: "rtl",
    values: {
      moreUsers: "+3",
    },
  },
}

const { dir, values: t } = translations.ar
---

<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12" dir={dir}>
  <Avatar>
    <AvatarImage
      src="https://github.com/shadcn.png"
      alt="@shadcn"
      class="grayscale"
    />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
    <AvatarBadge class="bg-green-600 dark:bg-green-800" />
  </Avatar>
  <AvatarGroup class="grayscale">
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
      <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <AvatarFallback>ER</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>{t.moreUsers}</AvatarGroupCount>
  </AvatarGroup>
</div>
```

## API Reference

Source: [`src/components/ui/avatar`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/avatar)

### Avatar

| Prop   | Type                        | Default     |
| ------ | --------------------------- | ----------- |
| `size` | `"default" \| "sm" \| "lg"` | `"default"` |

Renders a `span` with `data-size`, which `AvatarFallback` and `AvatarBadge` read
through `group/avatar`.

### AvatarImage

Accepts the props of Astro's `Image`.

| Prop     | Type                      | Default         |
| -------- | ------------------------- | --------------- |
| `src`    | `ImageMetadata \| string` | -               |
| `alt`    | `string`                  | `""`            |
| `width`  | `number`                  | `44`            |
| `height` | `number`                  | `44`            |
| `sizes`  | `string`                  | `"44px"`        |
| `widths` | `number[]`                | `[44, 88, 176]` |

### AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount

These take the attributes of their element (`span` for `AvatarFallback` and
`AvatarBadge`, `div` for `AvatarGroup` and `AvatarGroupCount`) and a `class`.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/avatar-examples
```