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

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/avatar"

templ AvatarDemo() {
	<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src:   "https://github.com/axadrn.png",
				Alt:   "@axadrn",
				Class: "grayscale",
			})
			@avatar.Fallback() {
				AA
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/joerdav.png",
				Alt: "@joerdav",
			})
			@avatar.Fallback() {
				JD
			}
			@avatar.Badge(avatar.BadgeProps{Class: "bg-green-600 dark:bg-green-800"})
		}
		@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {
			@avatar.Avatar() {
				@avatar.Image(avatar.ImageProps{
					Src: "https://github.com/axadrn.png",
					Alt: "@axadrn",
				})
				@avatar.Fallback() {
					AA
				}
			}
			@avatar.Avatar() {
				@avatar.Image(avatar.ImageProps{
					Src: "https://github.com/a-h.png",
					Alt: "@a-h",
				})
				@avatar.Fallback() {
					AH
				}
			}
			@avatar.Avatar() {
				@avatar.Image(avatar.ImageProps{
					Src: "https://github.com/joerdav.png",
					Alt: "@joerdav",
				})
				@avatar.Fallback() {
					JD
				}
			}
			@avatar.GroupCount() {
				+3
			}
		}
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add avatar
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="avatar" title="components/avatar/avatar.templ" />

<ComponentSource name="avatar" title="components/avatar/avatar.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/avatar"
```

```templ showLineNumbers
@avatar.Avatar() {
	@avatar.Image(avatar.ImageProps{Src: "https://github.com/axadrn.png"})
	@avatar.Fallback() {
		AA
	}
}
```

## Composition

Use the following composition to build an `Avatar`:

```text
avatar.Avatar
├── avatar.Image
├── avatar.Fallback
└── avatar.Badge
```

Use the following composition to build an `avatar.Group`:

```text
avatar.Group
├── avatar.Avatar
│   ├── avatar.Image
│   ├── avatar.Fallback
│   └── avatar.Badge
├── avatar.Avatar
│   ├── avatar.Image
│   ├── avatar.Fallback
│   └── avatar.Badge
└── avatar.GroupCount
```

## Basic

A basic avatar component with an image and a fallback.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/avatar"

templ AvatarBasic() {
	@avatar.Avatar() {
		@avatar.Image(avatar.ImageProps{
			Src:   "https://github.com/axadrn.png",
			Alt:   "@axadrn",
			Class: "grayscale",
		})
		@avatar.Fallback() {
			AA
		}
	}
}
```

## Badge

Use the `avatar.Badge` component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/avatar"

templ AvatarBadgeExample() {
	@avatar.Avatar() {
		@avatar.Image(avatar.ImageProps{
			Src: "https://github.com/axadrn.png",
			Alt: "@axadrn",
		})
		@avatar.Fallback() {
			AA
		}
		@avatar.Badge(avatar.BadgeProps{Class: "bg-green-600 dark:bg-green-800"})
	}
}
```

Use the `Class` prop to add custom styles to the badge such as custom colors, sizes, etc.

```templ showLineNumbers
@avatar.Avatar() {
	@avatar.Image(avatar.ImageProps{Src: "https://github.com/axadrn.png", Alt: "@axadrn"})
	@avatar.Fallback() {
		AA
	}
	@avatar.Badge(avatar.BadgeProps{Class: "bg-green-600 dark:bg-green-800"})
}
```

## Badge with Icon

You can also use an icon inside `avatar.Badge`.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AvatarBadgeIcon() {
	@avatar.Avatar(avatar.Props{Class: "grayscale"}) {
		@avatar.Image(avatar.ImageProps{
			Src: "https://github.com/axadrn.png",
			Alt: "@axadrn",
		})
		@avatar.Fallback() {
			AA
		}
		@avatar.Badge() {
			@icon.Plus()
		}
	}
}
```

## Avatar Group

Use the `avatar.Group` component to add a group of avatars.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/avatar"

templ AvatarGroup() {
	@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/axadrn.png",
				Alt: "@axadrn",
			})
			@avatar.Fallback() {
				AA
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/a-h.png",
				Alt: "@a-h",
			})
			@avatar.Fallback() {
				AH
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/joerdav.png",
				Alt: "@joerdav",
			})
			@avatar.Fallback() {
				JD
			}
		}
	}
}
```

## Avatar Group Count

Use `avatar.GroupCount` to add a count to the group.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/avatar"

templ AvatarGroupCount() {
	@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/axadrn.png",
				Alt: "@axadrn",
			})
			@avatar.Fallback() {
				AA
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/a-h.png",
				Alt: "@a-h",
			})
			@avatar.Fallback() {
				AH
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/joerdav.png",
				Alt: "@joerdav",
			})
			@avatar.Fallback() {
				JD
			}
		}
		@avatar.GroupCount() {
			+3
		}
	}
}
```

## Avatar Group with Icon

You can also use an icon inside `avatar.GroupCount`.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AvatarGroupCountIcon() {
	@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/axadrn.png",
				Alt: "@axadrn",
			})
			@avatar.Fallback() {
				AA
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/a-h.png",
				Alt: "@a-h",
			})
			@avatar.Fallback() {
				AH
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/joerdav.png",
				Alt: "@joerdav",
			})
			@avatar.Fallback() {
				JD
			}
		}
		@avatar.GroupCount() {
			@icon.Plus()
		}
	}
}
```

## Sizes

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

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/avatar"

templ AvatarSize() {
	<div class="flex flex-wrap items-center gap-2 grayscale">
		@avatar.Avatar(avatar.Props{Size: avatar.SizeSm}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/axadrn.png",
				Alt: "@axadrn",
			})
			@avatar.Fallback() {
				AA
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/axadrn.png",
				Alt: "@axadrn",
			})
			@avatar.Fallback() {
				AA
			}
		}
		@avatar.Avatar(avatar.Props{Size: avatar.SizeLg}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://github.com/axadrn.png",
				Alt: "@axadrn",
			})
			@avatar.Fallback() {
				AA
			}
		}
	</div>
}
```

## Dropdown

You can use the `Avatar` component as a trigger for a dropdown menu.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ AvatarDropdown() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantGhost,
			Size:       button.SizeIcon,
			Class:      "rounded-full",
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			@avatar.Avatar() {
				@avatar.Image(avatar.ImageProps{
					Src: "https://github.com/axadrn.png",
					Alt: "axadrn",
				})
				@avatar.Fallback() {
					AA
				}
			}
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-32"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					Profile
				}
				@dropdownmenu.Item() {
					Billing
				}
				@dropdownmenu.Item() {
					Settings
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {
					Log out
				}
			}
		}
	}
}
```

## API Reference

### Avatar

The `Avatar` component is the root component that wraps the avatar image and fallback.

| Prop    | Type                              | Default       |
| ------- | --------------------------------- | ------------- |
| `Size`  | `SizeDefault \| SizeSm \| SizeLg` | `SizeDefault` |
| `Class` | `string`                          | -             |

### Image

The `avatar.Image` component displays the avatar image.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Src`   | `string` | -       |
| `Alt`   | `string` | -       |
| `Class` | `string` | -       |

### Fallback

The `avatar.Fallback` component displays a fallback when the image fails to load.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Badge

The `avatar.Badge` component displays a badge indicator on the avatar, typically positioned at the bottom right.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Group

The `avatar.Group` component displays a group of avatars with overlapping styling.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### GroupCount

The `avatar.GroupCount` component displays a count indicator in an avatar group, typically showing the number of additional avatars.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |