---
title: "Integrate the Avatar UI component"
description: "Integrate a visual representation of a user or entity into your editor. Learn more in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/avatar"
---

# Integrate the Avatar UI component

Integrate a visual representation of a user or entity into your editor. Learn more in the docs.

A visual representation of a user or entity, typically used in user interfaces to represent a person.

> **Interactive demo:** [avatar](https://template.tiptap.dev/preview/tiptap-ui-primitive/avatar)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add avatar
```

## Usage

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/tiptap-ui-primitive/avatar'

export default function MyComponent() {
  return (
    <Avatar>
      <AvatarImage src="https://placehold.co/150" alt="User avatar" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  )
}
```

## Avatar Group

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from '@/components/tiptap-ui-primitive/avatar'

export default function MyComponent() {
  return (
    <AvatarGroup maxVisible={3}>
      <Avatar>
        <AvatarImage src="/avatars/user1.png" alt="User 1" />
        <AvatarFallback>U1</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user2.png" alt="User 2" />
        <AvatarFallback>U2</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user3.png" alt="User 3" />
        <AvatarFallback>U3</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user4.png" alt="User 4" />
        <AvatarFallback>U4</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  )
}
```

## Props

### Avatar

| Name | Type                      | Default   | Description |
| ---- | ------------------------- | --------- | ----------- |
| size | 'default' \| 'sm' \| 'lg' | 'default' | Avatar size |

### AvatarImage

| Name | Type   | Default  | Description                         |
| ---- | ------ | -------- | ----------------------------------- |
| src  | string | required | Image source URL                    |
| alt  | string | required | Alternative text for screen readers |

### AvatarFallback

| Name    | Type   | Default | Description                                 |
| ------- | ------ | ------- | ------------------------------------------- |
| delayMs | number | 0       | Delay in ms before showing fallback content |

### AvatarGroup

| Name       | Type   | Default   | Description                                  |
| ---------- | ------ | --------- | -------------------------------------------- |
| maxVisible | number | undefined | Maximum avatars to display before collapsing |