Avatar

A circular image element with an automatic fallback to initials or a placeholder when the image is unavailable.

✓Graceful fallback — shows initials or placeholder when image fails or is absent
✓AvatarGroup stacks multiple avatars with configurable max and overflow count
✓Consistent 40×40 px default size, fully overridable via className
✓Forwards refs to underlying Radix primitives

SCJD

ABC+1

import { Avatar }from "@aetherstack/ui"

avatar.tsx

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

export function AvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      {/* With image */}
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>

      {/* Fallback initials */}
      <Avatar>
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>

      {/* Group with overflow */}
      <AvatarGroup max={3}>
        <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
        <Avatar><AvatarFallback>B</AvatarFallback></Avatar>
        <Avatar><AvatarFallback>C</AvatarFallback></Avatar>
        <Avatar><AvatarFallback>D</AvatarFallback></Avatar>
      </AvatarGroup>
    </div>
  )
}

Usage

With image

Provide a src URL via AvatarImage. If the image loads successfully, AvatarFallback is hidden.

Fallback initials

When no image src is provided, or the image fails to load, AvatarFallback is shown instead.

JDABMR

AvatarGroup with max

Stack multiple avatars together. Set max to limit visible avatars — excess are shown as a +N overflow badge.

ALBKCM+2

Props

Prop	Type	Default	Description
className	string	—	Additional class names applied to the Avatar root (40×40 circle by default).
...props	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>	—	All Radix Avatar Root props are forwarded.

AvatarImage

Prop	Type	Default	Description
src	string	—	URL of the avatar image.
alt	string	—	Alt text for the image — important for screen readers.
className	string	—	Additional class names applied to the image element.

AvatarFallback

Prop	Type	Default	Description
children	ReactNode	—	Content shown when the image is unavailable. Typically 1–2 initials.
className	string	—	Additional class names applied to the fallback element.

AvatarGroup

Prop	Type	Default	Description
children*	ReactNode	—	Avatar elements to display in the group.
max	number	—	Maximum number of avatars to show. Excess is rendered as a +N badge.
className	string	—	Additional class names applied to the group container.

* Required props

Accessibility

→Always provide a meaningful alt on AvatarImage for screen readers.
→AvatarFallback is announced when no image is present — keep initials short and meaningful.
→The avatar circle has overflow: hidden applied — decorative images need no extra aria attributes.