Groudit UI

Avatar

Betav1.0.0

사용자 프로필 이미지. 이미지 로드 실패 시 fallback.

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

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

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/avatar.json

Composition

Avatar
├── AvatarImage
└── AvatarFallback

Accessibility

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.1.1

Notes

  • •이미지에 의미 있는 alt 필수. 장식용이면 alt="".