Avatar

Ready

User profile images with automatic fallbacks

Basic Avatar

Avatar with image and fallback

CNJD

Sizes

4 avatar sizes available

SMMDLGXL

Installation

npm install @radix-ui/react-avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export default function Example() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

Features

  • Automatic fallback - Shows initials if image fails to load
  • 4 sizes - Small (32px), medium (40px), large (48px), extra-large (64px)
  • Circular design - Full border radius for perfect circles
  • Accessible - Proper alt text support