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 |