JD
Avatar
Modern avatar profile indicators with support for clean fallback states, custom icons, and borders.
Preview & Interactive Laboratory
Visual Sizes
SMSmall (h-8)
DFDefault (h-12)
LGLarge (h-16)
Fallback States
JD
Premium Outlines
JDJDJD
Usage & Implementation
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
<Avatar className="h-12 w-12 border-2 border-violet-500/50">
<AvatarImage src="/images/avatars/avatar-5.jpg" alt="Profile" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>React / Tailwind
Granular Customization
1
Avatar Container
Configures sizes, borders, or rounded corners.
className={`className='h-16 w-16 rounded-3xl'`}2
Image Tag
Core image render tag.
className={`className`}3
Fallback Area
Displays initials or SVG icons if image fails to load.
className={`className='bg-gradient-to-r from-violet-500 to-purple-600 text-white shadow-sm shadow-violet-400/20'`}API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | The source URL of the avatar image. |
| alt | string | undefined | The alternative text description of the image. |
| delayMs | number | undefined | The latency before rendering fallback placeholder. |