Avatar

A retro-square avatar (no rounded pills) with a thick navy border. Five sizes, image + fallback slots, and an AvatarGroup overlap layout.

Sizes

avatar-demo.app

XSSMSCLGXL

avatar-group-demo.app

YLKAMI+5

terminal.sh

npx y2kui@latest add avatar

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

Prop	Type	Default	Description
`size`	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	`'md'`	Avatar dimensions.
`AvatarImage.src`	string	—	Image source URL.
`AvatarImage.alt`	string	—	Alt text for accessibility.
`AvatarFallback`	ReactNode	—	Content shown when the image fails to load.
`AvatarGroup`	ReactNode	—	Stacks avatars with overlapping borders.