Avatar
Displays a user profile image with automatic fallback to initials or icons when the image is unavailable, perfect for user lists, comments, and navigation bars.
Default
The
Avatar component displays an image via AvatarImage and falls back to AvatarFallback content when the image is unavailable. The fallback is always rendered behind the image, so it appears seamlessly if the image fails to load.Fallback
When no
AvatarImage is provided, the AvatarFallback displays initials or other placeholder content automatically. This is useful for users who have not uploaded a profile picture, providing a recognizable identifier using their initials.Sizes
Use the
Size parameter to control avatar dimensions. Available sizes are Small (32px, for compact lists), Default (40px, standard usage), Large (48px, for profile headers), and ExtraLarge (64px, for profile pages).With Status
Use the
ShowDot parameter to display a built-in dot indicator on the avatar. Customize the dot color with DotClass (e.g., "bg-green-500" for online, "bg-yellow-500" for away). The dot defaults to bg-primary if no DotClass is provided.Avatar Group
Use the
AvatarGroup component to display multiple avatars with an overlapping layout. Avatars inside the group automatically receive a border ring via the AvatarGroupContext cascading parameter. Add a final avatar with a "+N" count to indicate additional members.Custom Variant
Use the
Class parameter on Avatar and AvatarFallback to create custom styled avatars with gradient backgrounds, custom border colors, or different shapes. Override the default rounded-full with rounded-lg for square avatars.User Card
A real-world composition pattern showing an avatar alongside user information inside a
Card. This pattern is common in user profile sections, team member lists, and comment threads where identity context is important.