Shadcn.io is not affiliated with official shadcn/ui
Avatar
A circular user avatar with image loading and automatic fallback to initials for profile displays
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.
Avatar preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.