Avatarstandard
사람이나 계정을 나타내는 동그란 그림(아바타, avatar)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Avatar` 위에 스타일을 얹습니다. 그림이 없거나 불러오지 못하면 대체 글자를 보여 줍니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/avatarDefault
avatar-example.tsx
import { Example, ExampleWrapper,} from "@/components/example"import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage,} from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from "@/components/ui/empty"import { CheckIcon, PlusIcon } from "lucide-react"
export default function AvatarExample() { return ( <ExampleWrapper> <AvatarSizes /> <AvatarWithBadge /> <AvatarWithBadgeIcon /> <AvatarGroupExample /> <AvatarGroupWithCount /> <AvatarGroupWithIconCount /> <AvatarInEmpty /> </ExampleWrapper> )}
function AvatarSizes() { return ( <Example title="Sizes"> <div className="flex flex-wrap items-center gap-2"> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> </div> <div className="flex flex-wrap items-center gap-2"> <Avatar size="sm"> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarFallback>CN</AvatarFallback> </Avatar> </div> </Example> )}
function AvatarWithBadge() { return ( <Example title="Badge"> <div className="flex flex-wrap items-center gap-2"> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23b45309'/%3E%3C/svg%3E" alt="@jorgezreik" /> <AvatarFallback>JZ</AvatarFallback> <AvatarBadge /> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23b45309'/%3E%3C/svg%3E" alt="@jorgezreik" /> <AvatarFallback>JZ</AvatarFallback> <AvatarBadge /> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23b45309'/%3E%3C/svg%3E" alt="@jorgezreik" /> <AvatarFallback>JZ</AvatarFallback> <AvatarBadge /> </Avatar> </div> <div className="flex flex-wrap items-center gap-2"> <Avatar size="sm"> <AvatarFallback>JZ</AvatarFallback> <AvatarBadge /> </Avatar> <Avatar> <AvatarFallback>JZ</AvatarFallback> <AvatarBadge /> </Avatar> <Avatar size="lg"> <AvatarFallback>JZ</AvatarFallback> <AvatarBadge /> </Avatar> </div> </Example> )}
function AvatarWithBadgeIcon() { return ( <Example title="Badge with Icon"> <div className="flex flex-wrap items-center gap-2"> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23be123c'/%3E%3C/svg%3E" alt="@pranathip" /> <AvatarFallback>PP</AvatarFallback> <AvatarBadge> <PlusIcon /> </AvatarBadge> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23be123c'/%3E%3C/svg%3E" alt="@pranathip" /> <AvatarFallback>PP</AvatarFallback> <AvatarBadge> <PlusIcon /> </AvatarBadge> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23be123c'/%3E%3C/svg%3E" alt="@pranathip" /> <AvatarFallback>PP</AvatarFallback> <AvatarBadge> <PlusIcon /> </AvatarBadge> </Avatar> </div> <div className="flex flex-wrap items-center gap-2"> <Avatar size="sm"> <AvatarFallback>PP</AvatarFallback> <AvatarBadge> <CheckIcon /> </AvatarBadge> </Avatar> <Avatar> <AvatarFallback>PP</AvatarFallback> <AvatarBadge> <CheckIcon /> </AvatarBadge> </Avatar> <Avatar size="lg"> <AvatarFallback>PP</AvatarFallback> <AvatarBadge> <CheckIcon /> </AvatarBadge> </Avatar> </div> </Example> )}
function AvatarGroupExample() { return ( <Example title="Group"> <AvatarGroup> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> </AvatarGroup> <AvatarGroup> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> </AvatarGroup> <AvatarGroup> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> </AvatarGroup> </Example> )}
function AvatarGroupWithCount() { return ( <Example title="Group with Count"> <AvatarGroup> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount>+3</AvatarGroupCount> </AvatarGroup> <AvatarGroup> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount>+3</AvatarGroupCount> </AvatarGroup> <AvatarGroup> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount>+3</AvatarGroupCount> </AvatarGroup> </Example> )}
function AvatarGroupWithIconCount() { return ( <Example title="Group with Icon Count"> <AvatarGroup> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount> <PlusIcon /> </AvatarGroupCount> </AvatarGroup> <AvatarGroup> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount> <PlusIcon /> </AvatarGroupCount> </AvatarGroup> <AvatarGroup> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" className="grayscale" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" className="grayscale" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" className="grayscale" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount> <PlusIcon /> </AvatarGroupCount> </AvatarGroup> </Example> )}
function AvatarInEmpty() { return ( <Example title="In Empty"> <Empty className="w-full flex-none border"> <EmptyHeader> <EmptyMedia> <AvatarGroup> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%2364748b'/%3E%3C/svg%3E" alt="@shadcn" className="grayscale" /> <AvatarFallback>CN</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%230f766e'/%3E%3C/svg%3E" alt="@maxleiter" className="grayscale" /> <AvatarFallback>LR</AvatarFallback> </Avatar> <Avatar size="lg"> <AvatarImage src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%237c3aed'/%3E%3C/svg%3E" alt="@evilrabbit" className="grayscale" /> <AvatarFallback>ER</AvatarFallback> </Avatar> <AvatarGroupCount> <PlusIcon /> </AvatarGroupCount> </AvatarGroup> </EmptyMedia> <EmptyTitle>No Team Members</EmptyTitle> <EmptyDescription> Invite your team to collaborate on this project. </EmptyDescription> </EmptyHeader> <EmptyContent> <Button> <PlusIcon /> Invite Members </Button> </EmptyContent> </Empty> </Example> )}