Dokümanlar/Primitives

Avatar

Baş harf, görsel ve çevrimiçi durum seçeneklerine sahip kullanıcı avatarı.

Avatar.tsx

Fotoğraflı Avatarlar & Durumlar

Baş Harfler & Geometrik Şekiller

CÖ

Takım Yığını (AvatarGroup · Hover Efektli)

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/avatar.json

Kullanım Örneği

import { Avatar, AvatarGroup } from "@/components/ui/Avatar"

<AvatarGroup max={3}>
  <Avatar src="/ada.jpg" name="Ada Lovelace" status="online" />
  <Avatar name="Grace Hopper" status="away" />
  <Avatar name="Alan Turing" />
  <Avatar name="Margaret Hamilton" />
</AvatarGroup>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
src	string	—	Profil görselinin adresi.
name	string	"User"	Erişilebilir ad ve otomatik baş harf kaynağı.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Avatar boyutu.
shape	"circle" \| "rounded" \| "square"	"circle"	Avatar geometrisi.
status	"online" \| "busy" \| "away" \| "offline"	—	İsteğe bağlı kullanıcı durumu.
fallback	ReactNode	—	Görsel yüklenemediğinde gösterilen özel içerik.
imageProps	ImgHTMLAttributes<HTMLImageElement>	—	İç görsele iletilen native özellikler.
statusLabel	string	—	Durum göstergesinin erişilebilir özel metni.