Avatar (Shared)

Avatar with 6 sizes, status indicators, fallback initials, and group stacking. Built on Radix UI Avatar primitive.

JD

AB

MK

Overview

Avatar is a composable component with Image and Fallback sub-components. It supports 6 size variants (xs through 2xl), 4 status indicators (online, offline, away, busy), and an AvatarGroup for stacking multiple avatars.

Usage

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

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Installation

Install via CLI

TypeScript

npx edbn-ui@latest add avatar

Examples

Sizes

XS

SM

MD

LG

XL

2X

Status Indicators

ON

AW

BS

OF

Fallback Initials

JD

Avatar Group

A

B

C

+2

API Reference

size"xs" | "sm" | "md" | "lg" | "xl" | "2xl"

="md"

Avatar size variant

status"online" | "offline" | "away" | "busy"

Status indicator dot

max (AvatarGroup)number

=4

Max visible avatars before showing +N overflow