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 (for Vite or Next.js)

npx @tiptap/cli add avatar

Manual Integration

For frameworks other than Vite or Next.js, add the primitive manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

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

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