Avatar

A compound avatar component built on Base UI primitives, supporting image display with fallback text, an optional badge indicator, and grouped avatar stacks.

Default
With imageSR
Fallback initialsJD
With badgePC
Group
UAUBUC
+5
Fallback

When the image fails to load, the fallback content is shown.

ARMJT
Group
Small (sm)
U1U2U3
Default + overflow count
ALBOCA
+7
Large (lg)
DAELFI
+2
Fallbacks only
RKSTUV
+12
Sizes
SMsm
MDdefault
LGlg
JDsm
JDdefault
JDlg
User List
  • JL
    Jordan LeeAdmin
  • MK
    Morgan KimEditor
  • RP
    Riley PatelViewer
  • CB
    Casey BrownEditor
  • AS
    Avery SinghViewer
With Badge

Use AvatarBadge to overlay a status indicator at the bottom-right corner.

ABsm
CDdefault
EFlg
ONonline
AWaway
OFoffline

Installation

npx shadcn@latest add @byronwade/avatar

Props

PropTypeDefaultDescription
size"default" | "sm" | "lg""default"Controls the overall size of the avatar (sm=24px, default=32px, lg=40px).
classNamestring—Additional CSS classes merged onto the root element.