React Avatar
A circular user avatar with image loading and automatic fallback to initials for profile displays
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Every modern app needs user avatars—those little circular photos that humanize interfaces. This React avatar component uses shadcn/ui and Radix UI to handle image loading gracefully with AvatarImage for the photo and AvatarFallback for initials when images fail or are loading. The circular shape is instantly recognizable, fallbacks happen automatically, and accessibility is built-in with proper alt text. Perfect for user profiles, comment sections, team member lists, or anywhere you need to represent people visually.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-1.jsonRelated patterns you will also like
Avatar with Initials
Avatar showing only fallback initials
Avatar with Icon
Avatar using icon fallback instead of initials
Avatar with Status
Avatar with online presence indicator
Square Avatar
Rounded square avatar variant
Avatar with Badge
Avatar with notification count badge
User Profile Card
Complete user card with avatar