Avatar
User avatar with gradient fallback initials, status indicator, animated ring, and smooth image crossfade. Unique gradient colors generated from initials.
Installation
$ npx shadcn@latest add avatarPreview
With Images
Fallback Initials
JD
AB
KZ
?
With Animated Ring
HQ
Sizes
XS
SM
MD
LG
XL
Status Indicators
Online
Away
Busy
OF
Offline
Animated Ring
HQ
Usage (React/TSX)
import { Avatar } from "@/components/ui/avatar"
export default function UserCard() {
return (
<div className="flex items-center gap-3">
<Avatar src="/user.jpg" alt="User" fallback="JD" size="md" status="online" />
<span>John Doe</span>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image source URL. |
| alt | string | — | Alt text for the image. |
| fallback | string | "?" | Fallback text when image fails or is missing. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | The size of the avatar. |
| status | "online" | "offline" | "away" | "busy" | — | Status indicator badge. |
| ring | boolean | false | Animated conic-gradient ring around avatar. |
| className | string | — | Additional CSS classes to apply. |