Avatar

사용자를 나타내는 이미지와 대체 표시를 제공합니다.

CNER

CNLRER

examples/krds/avatar-demo.tsx

import {
  Avatar,
  AvatarBadge,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/avatar.json

사용법

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

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

구성

다음 조합으로 Avatar:

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

다음 조합으로 AvatarGroup:

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

예제

Basic

이미지와 fallback을 포함한 기본 아바타 컴포넌트입니다.

examples/krds/avatar-basic.tsx

import {
  Avatar,
  AvatarFallback,

Badge

AvatarBadge 컴포넌트로 아바타에 배지를 추가합니다. 배지는 아바타의 오른쪽 아래에 배치됩니다.

examples/krds/avatar-badge.tsx

import {
  Avatar,
  AvatarBadge,

className prop으로 커스텀 색상, 크기 같은 배지 스타일을 추가합니다.

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

Badge with Icon

<AvatarBadge> 안에 아이콘을 넣을 수도 있습니다.

examples/krds/avatar-badge-icon.tsx

import { PlusIcon } from "lucide-react"

import {

Avatar Group

AvatarGroup 컴포넌트로 아바타 그룹을 추가합니다.

CNLRER

examples/krds/avatar-group.tsx

import {
  Avatar,
  AvatarFallback,

Avatar Group Count

Use <AvatarGroupCount> to add a count to the group.

CNLRER

examples/krds/avatar-group-count.tsx

import {
  Avatar,
  AvatarFallback,

Avatar Group with Icon

<AvatarGroupCount> 안에 아이콘을 넣을 수도 있습니다.

CNLRER

examples/krds/avatar-group-count-icon.tsx

import { PlusIcon } from "lucide-react"

import {

Sizes

size prop으로 아바타 크기를 변경합니다.

CNCNCN

examples/krds/avatar-size.tsx

import {
  Avatar,
  AvatarFallback,

Avatar 컴포넌트를 드롭다운 메뉴의 트리거로 사용할 수 있습니다.

examples/krds/avatar-dropdown.tsx

import {
  Avatar,
  AvatarFallback,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

CNER

CNLRER

+٣

examples/krds/avatar-rtl.tsx

"use client"

import * as React from "react"

API 참조

Avatar

The Avatar component is the root component that wraps the avatar image and fallback.

속성	타입	기본값
`size`	`"default" \| "sm" \| "lg"`	`"default"`
`className`	`string`	-

AvatarImage

The AvatarImage component displays the avatar image. It accepts all Radix UI Avatar Image props.

속성	타입	기본값
`src`	`string`	-
`alt`	`string`	-
`className`	`string`	-

AvatarFallback

The AvatarFallback component displays a fallback when the image fails to load. It accepts all Radix UI Avatar Fallback props.

속성	타입	기본값
`className`	`string`	-

AvatarBadge

The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

속성	타입	기본값
`className`	`string`	-

AvatarGroup

The AvatarGroup component displays a group of avatars with overlapping styling.

속성	타입	기본값
`className`	`string`	-

AvatarGroupCount

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.

속성	타입	기본값
`className`	`string`	-

For more information about Radix UI Avatar props, see the Radix UI documentation.

Aspect Ratio Badge