Avatar

Profil menüleri, yorum dizileri ve ekip listeleri için baş harfleri içeren bir kullanıcı resmi — neobrütalist tarzda kalın kenarlık uygulamasıyla.

NBHE

NBNSHE

import {
  Avatar,
  AvatarBadge,

Avatar, kullanıcı görselini gösterir ve görsel yüklenirken ya da yüklenemediğinde yerine — düzeni hiç kaydırmadan — AvatarFallback'i (baş harfler veya bir simge) koyar. Base UI Avatar bileşeni üzerine kuruludur ve neobrütalist reçeteye göre biçimlendirilmiştir: kalın 2 px'lik bir kenarlık ve başlık yazı tipinde koyu baş harfler.

Şu durumlarda tercih edin:

Profil menüleri — hesap işlemlerini açan üstbilgi avatarı; Dropdown örneğine bakın.
Yorum dizileri ve etkinlik akışları — her yazar satırının yanında bir yüz; bozuk veya eksik fotoğrafları baş harfler karşılar.
Ekip ve üye listeleri — AvatarGroup ile katılımcıları üst üste bindirin, taşan kısmı AvatarGroupCount ile özetleyin.

Kurulum


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/avatar.json
npx shadcn@latest add https://neobrutalism.com/r/base/avatar.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/avatar.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/avatar.json

Şu bağımlılıkları kurun:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

components/ui/avatar.tsx

"use client"

import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
  size?: "default" | "sm" | "lg"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      data-size={size}
      className={cn(
        "group/avatar relative flex size-8 shrink-0 rounded-full border-2 select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn(
        "aspect-square size-full rounded-full object-cover",
        className
      )}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "flex size-full items-center justify-center rounded-full bg-muted font-head text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
        className
      )}
      {...props}
    />
  )
}

function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="avatar-badge"
      className={cn(
        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group"
      className={cn(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
    />
  )
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
}

Import yollarını projenizin yapısına uyacak şekilde güncelleyin.

Kullanım

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

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

Kompozisyon

Bir Avatar oluşturmak için şu kompozisyonu kullanın:

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Bir AvatarGroup oluşturmak için şu kompozisyonu kullanın:

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Örnekler

Temel

Görsel ve yedek içeren temel bir avatar bileşeni.

import {
  Avatar,
  AvatarFallback,

Badge

Avatara bir badge eklemek için AvatarBadge bileşenini kullanın. Badge, avatarın sağ altına konumlandırılır.

import {
  Avatar,
  AvatarBadge,

Badge'e renk, boyut vb. gibi özel stiller eklemek için className prop'unu kullanın.

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Simgeli Badge

<AvatarBadge> içinde bir simge de kullanabilirsiniz.

import { PlusIcon } from "lucide-react"

import {

Avatar Grubu

Bir avatar grubu eklemek için AvatarGroup bileşenini kullanın.

NBNSHE

import {
  Avatar,
  AvatarFallback,

Avatar Grubu Sayacı

Gruba bir sayaç eklemek için <AvatarGroupCount> kullanın.

NBNSHE

import {
  Avatar,
  AvatarFallback,

Simgeli Avatar Grubu

<AvatarGroupCount> içinde bir simge de kullanabilirsiniz.

NBNSHE

import { PlusIcon } from "lucide-react"

import {

Boyutlar

Avatarın boyutunu değiştirmek için size prop'unu kullanın.

NBNBNB

import {
  Avatar,
  AvatarFallback,

Avatar bileşenini bir dropdown menüsü için tetikleyici olarak kullanabilirsiniz.

"use client"

import {

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

NBHE

NBNSHE

+٣

"use client"

import * as React from "react"

Erişilebilirlik

Avatar bir görseldir, dolayısıyla görsel kuralları geçerlidir: avatar kişiyi tanımlayan tek öğeyse AvatarImage'a kişinin adını içeren bir alt verin; hemen yanında görünür bir ad varsa alt="" kullanın — aksi hâlde ekran okuyucular adı iki kez duyurur. AvatarFallback baş harfleri düz metindir ve sesli okunur; anlamlı olmalarına dikkat edin. Avatar bir menü açıyorsa (Dropdown örneğine bakın), erişilebilir adı görsele değil tetikleyici düğmeye verin.

API Referansı

Avatar

Avatar bileşeni, avatar görselini ve yedeğini saran kök bileşendir.

Prop	Type	Default
`size`	`"default" \| "sm" \| "lg"`	`"default"`
`className`	`string`	-

AvatarImage

AvatarImage bileşeni, avatar görselini gösterir. Base UI Avatar Image'ın tüm prop'larını kabul eder.

Prop	Type	Default
`src`	`string`	-
`alt`	`string`	-
`className`	`string`	-

AvatarFallback

AvatarFallback bileşeni, görsel yüklenemediğinde bir yedek gösterir. Base UI Avatar Fallback'in tüm prop'larını kabul eder.

Prop	Type	Default
`className`	`string`	-

AvatarBadge

AvatarBadge bileşeni, avatarda genellikle sağ altta konumlandırılmış bir badge göstergesi gösterir.

Prop	Type	Default
`className`	`string`	-

AvatarGroup

AvatarGroup bileşeni, üst üste binen bir stille bir avatar grubu gösterir.

Prop	Type	Default
`className`	`string`	-

AvatarGroupCount

AvatarGroupCount bileşeni, bir avatar grubunda genellikle ek avatarların sayısını gösteren bir sayaç göstergesi gösterir.

Prop	Type	Default
`className`	`string`	-

Base UI Avatar prop'ları hakkında daha fazla bilgi için Base UI dokümanlarına bakın.