Yami

Avatar

An image element with a fallback for representing a user.

CN
ABC
+3

Installation

Add the avatar component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/avatar.json

Usage

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

<div className="flex items-center gap-4">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <AvatarGroup>
    <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
  </AvatarGroup>
</div>

Examples

Sizes

sm / default / lg
SMMDLG

Code

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

<div className="flex items-center gap-4">
  <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>MD</AvatarFallback></Avatar>
  <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
</div>

With badge

AvatarBadge status dot
CN

Code

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

<Avatar>
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-yami-primary" />
</Avatar>