Loading...
Loading...
> A user profile image component with automatic fallback support for when images fail to load.
1import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
1<Avatar>2 <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />3 <AvatarFallback>CN</AvatarFallback>4</Avatar>
1<Avatar>2 <AvatarImage src="https://github.com/vercel.png" alt="Vercel" />3 <AvatarFallback>VC</AvatarFallback>4</Avatar>
1<Avatar>2 <AvatarImage src="/invalid-url.png" alt="User" />3 <AvatarFallback>JD</AvatarFallback>4</Avatar>
1<Avatar className="h-8 w-8">2 <AvatarImage src="..." alt="Small" />3 <AvatarFallback className="text-xs">SM</AvatarFallback>4</Avatar>56<Avatar className="h-16 w-16">7 <AvatarImage src="..." alt="Large" />8 <AvatarFallback className="text-lg">LG</AvatarFallback>9</Avatar>
1<div className="flex -space-x-4">2 <Avatar className="border-2 border-background">3 <AvatarImage src="..." alt="User 1" />4 <AvatarFallback>U1</AvatarFallback>5 </Avatar>6 <Avatar className="border-2 border-background">7 <AvatarImage src="..." alt="User 2" />8 <AvatarFallback>U2</AvatarFallback>9 </Avatar>10 <Avatar className="border-2 border-background">11 <AvatarFallback>+5</AvatarFallback>12 </Avatar>13</div>
1<Avatar>2 <AvatarFallback className="bg-primary text-primary-foreground">AB</AvatarFallback>3</Avatar>4<Avatar>5 <AvatarFallback className="bg-success text-success-foreground">CD</AvatarFallback>6</Avatar>
1<div className="relative">2 <Avatar>3 <AvatarImage src="..." alt="Online User" />4 <AvatarFallback>ON</AvatarFallback>5 </Avatar>6 <span className="absolute bottom-0 right-0 h-3 w-3 border-2 border-background bg-success" />7</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| Avatar | React.ComponentProps | - | Root avatar container - accepts all div props plus Radix Avatar.Root props |
| AvatarImage.src | string | - | Image URL to display |
| AvatarImage.alt | string | - | Alt text for the image (required for accessibility) |
| AvatarFallback | React.ReactNode | - | Content to display when image fails to load or while loading |
| className | string | - | Additional CSS classes to apply to any avatar component |
✓ Use Avatar when:
✗ Don't use when:
Best Practices: