Avatar
Data DisplayA visual representation of a user or entity. Use avatars to identify users, show profile pictures, or represent items with images.
Import
import { Avatar, AvatarGroup } from "@/components/ui/avatar";Usage
Sizes
Avatars in different sizes
XSMLX
With Image
Avatar displaying a profile picture
JAM
Fallback Initials
Avatars showing initials when no image is available
JAMT
Avatar Group
Grouped avatars with overlap
A
B
C
+2
API Reference
src—stringURL of the avatar image
alt—stringAlt text for the image
fallback—stringText to show when image fails (usually initials)
size"md""xs" | "sm" | "md" | "lg" | "xl"Size of the avatar
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | URL of the avatar image |
alt | string | — | Alt text for the image |
fallback | string | — | Text to show when image fails (usually initials) |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of the avatar |