Avatar

User image and fallback primitive with explicit size and radius recipes.

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 the size recipe and choose radius independently.

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>

pnpm dlx shadcn@latest add @poyraz/avatar

Runtime dependencies

@radix-ui/react-avatar@^1.1.11, class-variance-authority@^0.7.1

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/atoms/avatar.tsx