Slot UI
3

Avatar

PreviousNext

A circular image representing a user or entity, with a text fallback when no image is available.

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

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/sajadevo.png" alt="@sajadevo" />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>
  );
}

Installation

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar>
  <AvatarImage src="https://github.com/sajadevo.png" alt="@sajadevo" />
  <AvatarFallback>SA</AvatarFallback>
</Avatar>

Examples

Small

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

export default function AvatarSm() {
  return (
    <Avatar size="sm">
      <AvatarImage src="https://github.com/sajadevo.png" alt="@sajadevo" />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>
  );
}

Large

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

export default function AvatarLg() {
  return (
    <Avatar size="lg">
      <AvatarImage src="https://github.com/sajadevo.png" alt="@sajadevo" />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>
  );
}