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
| 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 |