Now Available: Notion-like editor templateNotion-style editor for Tiptap Cloud

Integrate the Avatar UI component

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

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add avatar

Usage

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

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

Avatar Group

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

NameTypeDefaultDescription
size'default' | 'sm' | 'lg''default'Avatar size

AvatarImage

NameTypeDefaultDescription
srcstringrequiredImage source URL
altstringrequiredAlternative text for screen readers

AvatarFallback

NameTypeDefaultDescription
delayMsnumber0Delay in ms before showing fallback content

AvatarGroup

NameTypeDefaultDescription
maxVisiblenumberundefinedMaximum avatars to display before collapsing