データとフィードバック@neumorphism-ui/avatar

Avatar

Base UI Avatar を基盤に、画像の読み込み状態と fallback への切り替えを管理します。3つの size、ステータス badge、重なり合う group、残り人数の count を提供します。

@neumorphism-ui/avatar

Registry JSON

プレビュー

SMAMUI

チーム

ANDESO

インストール

npx shadcn@latest add @neumorphism-ui/avatar

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

<AvatarGroup>
  <Avatar size="lg">
    <AvatarImage src="/members/ana.jpg" alt="Ana Martins" />
    <AvatarFallback>AM</AvatarFallback>
    <AvatarBadge aria-label="オンライン" />
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>UI</AvatarFallback>
  </Avatar>
  <AvatarGroupCount aria-label="ほか8人のメンバー">+8</AvatarGroupCount>
</AvatarGroup>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`Avatar`	`size`	`"sm" \| "default" \| "lg"`	`"default"`	Avatar と badge の size をまとめて変更します。
`AvatarImage`	`src`	`string`	`—`	表示する画像の URL です。
`AvatarImage`	`alt`必須	`string`	`—`	画像が表す人物または対象を識別する代替テキストです。
`AvatarFallback`	`delayMs`	`number`	`0`	fallback を表示するまでの遅延時間です。
`AvatarBadge`	`children`	`React.ReactNode`	`—`	ステータスの dot または小さなステータスアイコンを表示します。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ