Avatar

An avatar component for displaying user profile pictures, initials, or fallback content.

AD
avatar-demo.tsx
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar/avatar";

export default function AvatarDemo() {
  return (
    <div>
      <Avatar>
        <AvatarImage src="/preetecool.png" alt="@preetecool" />
        <AvatarFallback>AD</AvatarFallback>
      </Avatar>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/avatar.json

Anatomy

anatomy
import {
Avatar,
AvatarImage,
AvatarFallback,
} from '../ui/avatar'

<Avatar>
  <AvatarImage />
  <AvatarFallback />
</Avatar>

Examples

With Motion

PC
avatar-motion.tsx
"use client";

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

const avatarVariants = {
  hidden: {
    opacity: 0,
    scale: 0,
  },
  visible: {
    opacity: 1,
    scale: 1,
  },
};

const avatarTransition = {
  duration: 0.4,
  scale: {
    type: "spring" as const,
    visualDuration: 0.2,
    bounce: 0.5,
  },
};

export default function AvatarMotion() {
  return (
    <div>
      <motion.div variants={avatarVariants} initial="hidden" animate="visible" transition={avatarTransition}>
        <Avatar>
          <AvatarImage src="/preetecool.png" alt="@preetecool" loading="eager" />
          <AvatarFallback>PC</AvatarFallback>
        </Avatar>
      </motion.div>
    </div>
  );
}