Avatar

Preview

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

export function AvatarDemo() {
  return (
  <Avatar>
    <AvatarImage
      src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
      alt="User avatar"
    />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
);
}

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/avatar

Usage

WithFallback

export const WithFallback = () => (
  <Avatar>
    <AvatarImage src="invalid-url.jpg" alt="User avatar" />
    <AvatarFallback>AB</AvatarFallback>
  </Avatar>
);

FallbackOnly

export const FallbackOnly = () => (
  <Avatar>
    <AvatarFallback>CD</AvatarFallback>
  </Avatar>
);

CustomSize

export const CustomSize = () => (
  <div className="flex gap-4 items-center">
    <Avatar className="size-8">
      <AvatarImage
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
        alt="Small avatar"
      />
      <AvatarFallback>SM</AvatarFallback>
    </Avatar>
    <Avatar className="size-12">
      <AvatarImage
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
        alt="Medium avatar"
      />
      <AvatarFallback>MD</AvatarFallback>
    </Avatar>
    <Avatar className="size-16">
      <AvatarImage
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
        alt="Large avatar"
      />
      <AvatarFallback>LG</AvatarFallback>
    </Avatar>
  </div>
);

AvatarGroup

export const AvatarGroup = () => (
  <div className="flex -space-x-2">
    <Avatar className="border-2 border-white">
      <AvatarImage
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
        alt="User 1"
      />
      <AvatarFallback>U1</AvatarFallback>
    </Avatar>
    <Avatar className="border-2 border-white">
      <AvatarImage
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&h=128&fit=crop"
        alt="User 2"
      />
      <AvatarFallback>U2</AvatarFallback>
    </Avatar>
    <Avatar className="border-2 border-white">
      <AvatarImage
        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&fit=crop"
        alt="User 3"
      />
      <AvatarFallback>U3</AvatarFallback>
    </Avatar>
    <Avatar className="border-2 border-white">
      <AvatarFallback>+5</AvatarFallback>
    </Avatar>
  </div>
);

WithStatus

export const WithStatus = () => (
  <div className="flex gap-4 items-center">
    <div className="relative">
      <Avatar>
        <AvatarImage
          src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
          alt="Online user"
        />
        <AvatarFallback>ON</AvatarFallback>
      </Avatar>
      <span className="absolute bottom-0 right-0 block size-1 rounded-full bg-green-500 ring-2 ring-white" />
    </div>
    <div className="relative">
      <Avatar>
        <AvatarImage
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&h=128&fit=crop"
          alt="Away user"
        />
        <AvatarFallback>AW</AvatarFallback>
      </Avatar>
      <span className="absolute bottom-0 right-0 block size-1 rounded-full bg-yellow-500 ring-2 ring-white" />
    </div>
    <div className="relative">
      <Avatar>
        <AvatarImage
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&fit=crop"
          alt="Offline user"
        />
        <AvatarFallback>OF</AvatarFallback>
      </Avatar>
      <span className="absolute bottom-0 right-0 block size-1 rounded-full bg-gray-400 ring-2 ring-white" />
    </div>
  </div>
);

DifferentShapes

export const DifferentShapes = () => (
  <div className="flex gap-4 items-center">
    <Avatar>
      <AvatarImage
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop"
        alt="Round avatar"
      />
      <AvatarFallback>RD</AvatarFallback>
    </Avatar>
    <Avatar className="rounded-md">
      <AvatarImage
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&h=128&fit=crop"
        alt="Rounded avatar"
      />
      <AvatarFallback>SQ</AvatarFallback>
    </Avatar>
    <Avatar className="rounded-none">
      <AvatarImage
        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&fit=crop"
        alt="Square avatar"
      />
      <AvatarFallback>BX</AvatarFallback>
    </Avatar>
  </div>
);

CustomFallbackStyles

export const CustomFallbackStyles = () => (
  <div className="flex gap-4 items-center">
    <Avatar>
      <AvatarFallback className="bg-accent-9 text-white">AC</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarFallback className="bg-gradient-to-br from-accent-9 to-accent-11 text-white">
        GR
      </AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarFallback className="bg-gray-9 text-white font-bold">
        BL
      </AvatarFallback>
    </Avatar>
  </div>
);

Props

Prop	Type	Default
All props from	`AvatarRadix.Root`	-

AvatarImage

Prop	Type	Default
All props from	`AvatarRadix.Image`	-

AvatarFallback

Prop	Type	Default
All props from	`AvatarRadix.Fallback`	-

Avatar

On this page