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

Manual

Install the following dependencies:

pnpm install radix-ui

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Avatar component into your components/ui/Avatar.tsx file.

"use client";
/**
 * @description An image element with a fallback for representing the user.
 */
import * as React from "react";
import { Avatar as AvatarRadix } from "radix-ui";
import { cn } from "@/utils/class-names";

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarRadix.Root>) {
  return (
    <AvatarRadix.Root
      data-slot="avatar"
      className={cn(
        "inline-flex size-3 items-center justify-center overflow-hidden rounded-full",
        className
      )}
      {...props}
    />
  );
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarRadix.Image>) {
  return (
    <AvatarRadix.Image
      data-slot="avatar-image"
      className={cn("size-full rounded-[inherit] object-cover", className)}
      {...props}
    />
  );
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarRadix.Fallback>) {
  return (
    <AvatarRadix.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "flex size-full items-center justify-center bg-gray-3",
        className
      )}
      {...props}
    />
  );
}

export { Avatar, AvatarImage, AvatarFallback };

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>
)

On this page