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
X
S
M
L
X
With Image
Avatar displaying a profile picture
Fallback Initials
Avatars showing initials when no image is available
J
A
M
T
Avatar Group
Grouped avatars with overlap
A
B
C
+2
API Reference
| 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 |