Avatar

An image element with a fallback for representing the user.

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

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage
        src="https://github.com/loveconnor.png"
        alt="Luke Tracy"
      />
      <AvatarFallback>LT</AvatarFallback>
    </Avatar>
  )
}

Installation

npx love-ui@latest add avatar

Usage

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

<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>CL</AvatarFallback>
</Avatar>

Examples

Fallback Only

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

export default function AvatarFallbackDemo() {
  return (
    <Avatar>
      <AvatarFallback>LT</AvatarFallback>
    </Avatar>
  )
}

Different Sizes

AVAVAV

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

export default function AvatarSizeDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar>
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="User"
        />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="User"
        />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
      <Avatar className="size-16">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="User"
        />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
    </div>
  )
}

Different Radius

AVAVAV

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

export default function AvatarRadiusDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar className="rounded-md">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="User"
        />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-xl">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="User"
        />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-full">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="User"
        />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
    </div>
  )
}

Group Avatars

U1U2U3

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

export default function AvatarGroupDemo() {
  return (
    <div className="flex -space-x-[0.6rem]">
      <Avatar className="ring-2 ring-background">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="U1"
        />
        <AvatarFallback>U1</AvatarFallback>
      </Avatar>
      <Avatar className="ring-2 ring-background">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="U2"
        />
        <AvatarFallback>U2</AvatarFallback>
      </Avatar>
      <Avatar className="ring-2 ring-background">
        <AvatarImage
          src="https://github.com/loveconnor.png"
          alt="U3"
        />
        <AvatarFallback>U3</AvatarFallback>
      </Avatar>
    </div>
  )
}

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with loveui quickly.

Quick Checklist

If you used asChild on parts, switch to the render prop

Autocomplete Badge