데이터와 피드백@neumorphism-ui/avatar

Avatar

Base UI Avatar 기반으로 이미지 로딩과 fallback 전환을 처리합니다. 세 가지 크기, 상태 badge, 겹쳐진 group과 잔여 인원 count를 제공합니다.

@neumorphism-ui/avatar

Registry JSON

미리보기

SMAMUI

팀

ANDESO

설치

npx shadcn@latest add @neumorphism-ui/avatar

CLI가 npm 의존성, base 토큰, 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의 크기를 함께 변경합니다.
`AvatarImage`	`src`	`string`	`—`	표시할 이미지 URL입니다.
`AvatarImage`	`alt`필수	`string`	`—`	이미지가 전달하는 사람이나 대상의 대체 텍스트입니다.
`AvatarFallback`	`delayMs`	`number`	`0`	fallback을 표시하기 전 대기 시간입니다.
`AvatarBadge`	`children`	`React.ReactNode`	`—`	상태 점 또는 작은 상태 아이콘을 표시합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성