Avatar

An image element with a fallback for representing users. Supports multiple sizes and graceful fallback to initials.

Installation

Terminal

ReactTailwind

TSX

npx @uiblox/cli add avatar

Visual Variations

Toggle between three different shape styles: circular (default), rounded (corners), and square (sharp).

With Image

User photos

With Initials

Fallback initials

Avatar Group

Stacked avatars

Basic Usage

Copy & paste ready

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="User" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Sizes

Copy & paste ready

<Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
<Avatar size="md"><AvatarFallback>MD</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>

With Initials

ReactTailwind CSSCopy & paste ready

<Avatar>
  <AvatarFallback>{getInitials("John Doe")}</AvatarFallback>
</Avatar>
<Avatar>
  <AvatarFallback>{getInitials("Jane Smith")}</AvatarFallback>
</Avatar>

Avatar Group

ReactTailwind CSSCopy & paste ready

<div className="flex -space-x-2">
  <Avatar className="border-2 border-white dark:border-gray-900">
    <AvatarFallback className="bg-purple-500 text-white">JD</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-white dark:border-gray-900">
    <AvatarFallback className="bg-blue-500 text-white">JS</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-white dark:border-gray-900">
    <AvatarFallback className="bg-green-500 text-white">AJ</AvatarFallback>
  </Avatar>
</div>

Props

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl"	"md"	The size of the avatar
className	string	-	Additional CSS classes

Source Code

Copy this code into src/components/ui/avatar.tsx:

avatar.tsx

ReactTailwind

TSX

import * as React from "react";
import { cn } from "@/lib/utils";

interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: "sm" | "md" | "lg" | "xl";
}

const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
  ({ className, size = "md", ...props }, ref) => {
    const sizeClasses = {
      sm: "h-8 w-8 text-xs",
      md: "h-10 w-10 text-sm",
      lg: "h-12 w-12 text-base",
      xl: "h-16 w-16 text-lg",
    };

    return (
      <div
        ref={ref}
        className={cn(
          "relative flex shrink-0 overflow-hidden rounded-full",
          sizeClasses[size],
          className
        )}
        {...props}
      />
    );
  }
);
Avatar.displayName = "Avatar";

const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
  ({ className, alt, ...props }, ref) => (
    <img
      ref={ref}
      alt={alt}
      className={cn("aspect-square h-full w-full object-cover", className)}
      {...props}
    />
  )
);
AvatarImage.displayName = "AvatarImage";

const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 font-medium text-gray-600 dark:text-gray-400",
        className
      )}
      {...props}
    />
  )
);
AvatarFallback.displayName = "AvatarFallback";

function getInitials(name: string): string {
  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
}

export { Avatar, AvatarImage, AvatarFallback, getInitials };