Data Display

Avatar

A circular container for user profile images with automatic fallback support. Shows initials or placeholder content when the image is unavailable.

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@mikenotthepope/substrateui"

Avatar
├── AvatarImage
└── AvatarFallback

JDAB

SMMDLGXL

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes. Use to override the default h-10 w-10 sizing.

Prop	Type	Default	Description
`src` required	`string`	—	The image URL for the avatar.
`alt` required	`string`	—	Accessible alt text for the avatar image.
`className`	`string`	—	Additional CSS classes for the image element.

Prop	Type	Default	Description
`children` required	`React.ReactNode`	—	Fallback content shown while the image loads or when it fails. Typically initials.
`className`	`string`	—	Additional CSS classes for the fallback container.