アバター

プロフィールメニュー、コメントスレッド、チームリスト用に、イニシャルによる代替表示機能を備えたユーザー画像です。ネオブルータリズム風の太い枠の処理が施されています。

NBHE

NBNSHE

import {
  Avatar,
  AvatarBadge,

Avatar はユーザー画像を表示し、読み込み中や失敗時に 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,

バッジ

AvatarBadge コンポーネントを使って、アバターにバッジを追加します。バッジはアバターの右下に配置されます。

import {
  Avatar,
  AvatarBadge,

className プロパティを使って、色やサイズなどのカスタムスタイルをバッジに適用できます。

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

アイコン付きバッジ

<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

Neobrutalism で RTL を有効にする方法は、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 コンポーネントは、アバター上にバッジインジケーターを表示します。通常は右下に配置されます。

Prop	Type	Default
`className`	`string`	-

AvatarGroup

AvatarGroup コンポーネントは、重なり合うスタイルでアバターのグループを表示します。

Prop	Type	Default
`className`	`string`	-

AvatarGroupCount

AvatarGroupCount コンポーネントは、アバターグループ内にカウントインジケーターを表示します。通常は追加のアバターの数を示します。

Prop	Type	Default
`className`	`string`	-

Base UI Avatar のプロパティについて詳しくは、Base UI のドキュメントをご覧ください。