Avatar

User avatar with image and initials fallback, built on @radix-ui/react-avatar. Six sizes (24-64), circle or square shape.

$npx shadcn@latest add https://ui.btng.studio/r/avatar

With image

Primary form. Renders AvatarImage; Radix swaps to AvatarFallback if the image fails to load.

PW

Fallback only

When there is no image — renders the initials on a tinted brand background.

PWBTNG

Sizes

xs (24) · sm (32) · md (40, default) · lg (48) · xl (56) · 2xl (64).

XSSMMDLGXL2XL

Square

Pass shape='square' for a rounded-md tile (typical for org/company avatars).

BT

With status

Stack a StatusIcon absolutely to the bottom-right for presence indicators.

PW