Avatar

A versatile avatar component that displays user profile pictures with fallback initials, multiple variants, sizes, and status indicators.

Basic Usage

JD
JS
AJ

Sizes

JD
Extra Small (xs)
JS
Small (sm)
AJ
Medium (md) - Default
SW
Large (lg)
MD
Extra Large (xl)
EB
2X Large (2xl)

Variants

CA
Circle (Default)
RA
Rounded
SA
Square

Status Indicators

OU
Online
AU
Away
BU
Busy
OU
Offline

With Images

JD
SW
MJ

Team Members

JD

John Doe

Product Manager

JS

Jane Smith

UX Designer

SW

Sarah Wilson

Frontend Developer

Avatar Group

U1
U2
U3
U4
+5

Variants with Status

C
R
S

Error Handling

BI
NI
?
Avatar Component
tsx
1import { HTMLAttributes, forwardRef, useState } from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/cn";
4

5const avatarVariants = cva(
6  [
7    "relative flex shrink-0 overflow-hidden",
8    "bg-neutral-100 dark:bg-neutral-800",
9    "text-neutral-600 dark:text-neutral-400",
10    "select-none items-center justify-center",