Avatar

An image element with a fallback for representing a user.

ABC

Installation

Add the avatar component with the shadcn CLI.

bash

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

Usage

tsx

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

Examples

Sizes

sm / default / lg

SMMDLG

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

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

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