ComponentsAvatar
Avatars
Display user avatars and initials
Avatar
The Avatar component displays an image avatar using Next.js's Image component for optimal performance.
Tip!
Use the width and height props to adjust the size of the avatar. The default size is 50x50 pixels.
Warning!
Ensure that the src prop points to a valid image URL. Invalid URLs may cause rendering issues.
Letter Avatar
The LetterAvatar component displays a single letter, typically the user's initial, when an image is not available.
Info
The LetterAvatar is useful for representing users who haven't uploaded a profile picture or when you want to display initials instead of images.
Tip!
You can customize the background color and text color by modifying the className prop to match your application's color scheme.
Avatar List
The AvatarList component displays a group of avatars, typically used to show multiple users or participants.
Info
The AvatarList component slightly overlaps avatars to create a compact group representation.
Tip!
Limit the number of avatars displayed to prevent overcrowding. Consider showing a "+X more" indicator for additional users.
Usage Examples
Basic Avatar
Letter Avatar
Avatar List
Info
When using AvatarList, either provide a valid image URL or a letter for each avatar. The component will automatically render the appropriate avatar type based on the provided data.