Avatar Component

An image element with a fallback for representing the user.

Installation

The Avatar component is part of our UI library. You can import it directly from the components directory.

Here is how to use the avatar in your project.

React TSX
1import {
2  Avatar,
3  AvatarImage,
4  AvatarFallback
5} from "@/components/modern-ui/avatar"

React TSX
1<Avatar>
2  <AvatarImage src="https://example.com/user.jpg" alt="User" />
3  <AvatarFallback>JD</AvatarFallback>
4</Avatar>

MAMAMA

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	AvatarImage and AvatarFallback components

Prop	Type	Default	Description
`src`	`string`	-	URL of the avatar image
`alt`	`string`	-	Alt text for the avatar image
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`delayMs`	`number`	`600`	Delay before showing fallback when image fails to load
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Content to display as fallback

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Avatar components
`max`	`number`	-	Maximum number of avatars to display before showing a count