Avatar

The iChat buddy icon: photo, initials over a gel color, or the classic generic silhouette.

Igor DucaSJIDJI
Igor DucaSJIDJI
installnpx shadcn@latest add @aqua/avatar

Usage

import { Avatar } from "@/components/ui/avatar"

<Avatar src="/buddy.png" alt="Igor Duca" />
<Avatar initials="SJ" />
<Avatar initials="ID" color="#e02f6b" />
<Avatar initials="JI" randomColor />
<Avatar shape="circle" initials="SJ" />
<Avatar />

With no src or initials, the avatar renders the generic buddy silhouette. Without an explicit color, the gel background follows the theme accent; randomColor picks a stable era color from the initials, so the same buddy always gets the same gel. Sizes come as sm, default and lg; the shape is the square buddy well by default, or a full circle with shape="circle".