Avatar

User profile image with automatic fallback initials. Built on Radix Avatar with the brutalist square style.

Import

import { Avatar, AvatarImage, AvatarFallback } from "poyraz-ui/atoms";

With Image

Displays an image when available, falls back to initials.

CNPA

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Fallback

When no image is provided, initials are shown.

PAUIAB

<Avatar>
  <AvatarFallback>PA</AvatarFallback>
</Avatar>

Sizes

Use className to adjust the size.

SML

<Avatar className="h-8 w-8">
  <AvatarFallback className="text-xs">S</AvatarFallback>
</Avatar>
<Avatar>
  <AvatarFallback>M</AvatarFallback>
</Avatar>
<Avatar className="h-14 w-14">
  <AvatarFallback className="text-lg">L</AvatarFallback>
</Avatar>