Avatar

Installation

npx shadcn@latest add @uqudo/avatar

Usage

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

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

The fallback shows while the image loads and stays if it fails. Pick a footprint with size:

<Avatar size="lg">
  <AvatarFallback>UQ</AvatarFallback>
</Avatar>

Examples

Group

AvatarGroup overlaps its avatars and rings each one with the background colour. AvatarGroupCount renders a matching circle for the overflow count and picks up the size of the avatars around it.

Badge

AvatarBadge sits on the bottom end corner as a presence or status dot. It scales with the avatar size and can hold a small icon at default and lg.

API Reference

Avatar

The root. A round container that clips its image and draws a hairline border.

AvatarImage

AvatarFallback

AvatarBadge

A span positioned over the bottom end corner of its parent Avatar. Filled with the primary colour; override with className for other states.

AvatarGroup

A flex row that pulls its child avatars together and rings them so they stay distinct where they overlap.

AvatarGroupCount

A muted circle for the "+N" overflow indicator. Matches the diameter of the avatars in the surrounding AvatarGroup.

Data attributes