Avatar

A high-quality, styled React avatar component supporting fallback initials and custom ring styles.

The Avatar component displays user profile images or fallback initials when an image is unavailable or loading.

Usage

import { AvatarRoot, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

export function ExampleAvatar() {
  return (
    <AvatarRoot>
      <AvatarImage src="https://github.com/awaiden.png" alt="Halil Aydın" />
      <AvatarFallback>HA</AvatarFallback>
    </AvatarRoot>
  );
}

Preview

Custom Styling

Apply custom ring highlights, gradients, or custom border radiuses via inline className:

<div className="flex items-center gap-4">
  <AvatarRoot className="ring-2 ring-indigo-500 ring-offset-2 ring-offset-background">
    <AvatarImage src="https://github.com/awaiden.png" alt="User" />
    <AvatarFallback className="bg-indigo-600 text-white font-semibold">HA</AvatarFallback>
  </AvatarRoot>
  <AvatarRoot className="ring-2 ring-emerald-500 ring-offset-2 ring-offset-background">
    <AvatarFallback className="bg-gradient-to-tr from-emerald-500 to-teal-500 text-white font-bold">
      JD
    </AvatarFallback>
  </AvatarRoot>
</div>

Styling & Class Names

Target internal avatar CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.avatar`	Root container	Circular container flex layout.
`.avatar__image`	Image element	Aspect-square image element (`object-cover`).
`.avatar__fallback`	Fallback initials	Fallback container when image is loading/absent.
`avatar--sm`	Small size	Compact 32px (h-8 w-8) avatar.
`avatar--md`	Medium size	Standard 40px (h-10 w-10) avatar.
`avatar--lg`	Large size	Expanded 48px (h-12 w-12) avatar.

API Reference

Avatar Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dimension size of the avatar container.
`className`	`string`	`undefined`	Additional inline CSS utility classes.