Avatar

프로필, 멤버 목록, 공유 워크스페이스에서 사람이나 팀을 식별할 때 사용합니다.

미리보기

아바타 크기와 팀 묶음

세 가지 크기의 이니셜 아바타와 상태 배지를 비교하고 팀 그룹과 나머지 멤버 수를 보여 줍니다.

SMAMUI

팀

ANDESO

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/avatar

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

이미지를 불러오지 못해도 대상을 알아볼 수 있도록 AvatarImage와 AvatarFallback을 함께 쓰세요. 상태는 AvatarBadge로, 여러 사람은 AvatarGroup과 AvatarGroupCount로 표현합니다.

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

export default function Example() {
  return (
    <Avatar>
      <AvatarFallback role="img" aria-label="Alex Kim">AK</AvatarFallback>
    </Avatar>
  );
}

API 레퍼런스

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

컴포넌트	속성	타입	기본값	설명
`Avatar`	`size`	`"sm" \| "default" \| "lg"`	`"default"`	Avatar와 badge의 크기를 함께 변경합니다.
`AvatarImage`	`src`	`string`	`—`	표시할 이미지 URL입니다.
`AvatarImage`	`alt`필수	`string`	`—`	이미지가 전달하는 사람이나 대상의 대체 텍스트입니다.
`AvatarFallback`	`delay`	`number`	`0`	fallback을 표시하기 전 대기 시간입니다.
`AvatarBadge`	`children`	`React.ReactNode`	`—`	상태 점 또는 작은 상태 아이콘을 표시합니다.

미리보기

아바타 크기와 팀 묶음

설치

사용법

API 레퍼런스

접근성