Аватар

Аватар користувача з альтернативним зображенням на основі ініціалів для меню профілів, ланцюжків коментарів та списків команд — із товстими рамками в стилі необруталізму.

NBHE

NBNSHE

import {
  Avatar,
  AvatarBadge,

Аватар показує зображення користувача і підставляє AvatarFallback — ініціали чи іконку — поки зображення завантажується або якщо воно не вдалося, без зсуву макета. Побудований на компоненті Base UI Avatar і оформлений за рецептом необруталізму: товста рамка 2px і масивні ініціали шрифтом заголовка.

Коли це стане в пригоді:

Меню профілю — аватар у шапці, що відкриває дії облікового запису; див. приклад Dropdown.
Гілки коментарів і стрічки активності — обличчя біля кожного автора, ініціали замість зламаних чи відсутніх фото.
Списки команд і учасників — накладайте колег через AvatarGroup і обмежуйте переповнення через AvatarGroupCount.

Встановлення


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

Встановіть такі залежності:


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

Скопіюйте та вставте наведений нижче код у свій проєкт.

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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

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

Композиція

Використайте наведену композицію, щоб зібрати Avatar:

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

Використайте наведену композицію, щоб зібрати AvatarGroup:

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

Приклади

Базовий

Базовий компонент аватара із зображенням та запасним варіантом.

import {
  Avatar,
  AvatarFallback,

Badge

Використайте компонент AvatarBadge, щоб додати badge до аватара. Badge розміщується в нижньому правому куті аватара.

import {
  Avatar,
  AvatarBadge,

Використайте проп className, щоб додати badge власні стилі, як-от кольори, розміри тощо.

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

Badge з іконкою

Ви також можете використати іконку всередині <AvatarBadge>.

import { PlusIcon } from "lucide-react"

import {

Група аватарів

Використайте компонент AvatarGroup, щоб додати групу аватарів.

NBNSHE

import {
  Avatar,
  AvatarFallback,

Лічильник групи аватарів

Використайте <AvatarGroupCount>, щоб додати до групи лічильник.

NBNSHE

import {
  Avatar,
  AvatarFallback,

Група аватарів з іконкою

Ви також можете використати іконку всередині <AvatarGroupCount>.

NBNSHE

import { PlusIcon } from "lucide-react"

import {

Розміри

Використайте проп size, щоб змінити розмір аватара.

NBNBNB

import {
  Avatar,
  AvatarFallback,

Випадне меню

Ви можете використати компонент Avatar як тригер для випадного меню.

"use client"

import {

RTL

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

NBHE

NBNSHE

+٣

"use client"

import * as React from "react"

Доступність

Аватар — це зображення, тож діють правила для зображень: давайте AvatarImage атрибут alt з іменем людини, коли аватар — єдине, що її ідентифікує, і alt="", коли видиме ім’я стоїть поруч — інакше програми зчитування з екрана оголосять ім’я двічі. Ініціали AvatarFallback — звичайний текст і читаються вголос, тож робіть їх змістовними. Коли аватар відкриває меню (див. Dropdown), доступне ім’я ставте на кнопку-тригер, а не на зображення.

Довідник API

Avatar

Компонент Avatar — це кореневий компонент, який обгортає зображення аватара та запасний варіант.

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

AvatarImage

Компонент AvatarImage показує зображення аватара. Він приймає всі пропи Base UI Avatar Image.

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

AvatarFallback

Компонент AvatarFallback показує запасний варіант, коли зображення не вдається завантажити. Він приймає всі пропи Base UI Avatar Fallback.

Prop	Type	Default
`className`	`string`	-

AvatarBadge

Компонент AvatarBadge показує індикатор badge на аватарі, зазвичай розміщений у нижньому правому куті.

Prop	Type	Default
`className`	`string`	-

AvatarGroup

Компонент AvatarGroup показує групу аватарів із накладанням.

Prop	Type	Default
`className`	`string`	-

AvatarGroupCount

Компонент AvatarGroupCount показує індикатор-лічильник у групі аватарів, зазвичай відображаючи кількість додаткових аватарів.

Prop	Type	Default
`className`	`string`	-

Докладніше про пропи Base UI Avatar див. у документації Base UI.