Avatar

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/avatar

UsageCopy Anchor Link

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

<Avatar>
  <AvatarImage alt="Luke Tracy" src="/avatars/luke.png" />
  <AvatarFallback>LT</AvatarFallback>
</Avatar>;

The fallback shows while the image loads, if it fails, or when there's no image. Always give AvatarImage an alt.

SizesCopy Anchor Link

Every dimension comes from the --avatar-size custom property. It defaults to 32px, and the text size follows it. Set it on the avatar or on any parent:

A size-* class also resizes one avatar, but doesn't update --avatar-size, so the text and group overlap stay the same. Prefer --avatar-size.

GroupCopy Anchor Link

AvatarGroup overlaps avatars with a transparent gap between them, so it works on any background. End it with AvatarGroupCount for a "+N" chip. Set the size on the group, not on each avatar.

Set topmost="last" to keep the last avatar whole instead of the first.

Links and buttonsCopy Anchor Link

Avatar renders a <span>. To make it clickable, use render instead of wrapping it:

<Avatar render={<a href="/people/luke" />}>
  <AvatarImage alt="Luke Tracy" src="/avatars/luke.png" />
  <AvatarFallback>LT</AvatarFallback>
</Avatar>

The image's alt names the link. A fallback-only avatar has no name, so add an aria-label that includes the visible initials.

API referenceCopy Anchor Link

Each part accepts every prop of its Base UI Avatar part: Avatar is Avatar.Root, AvatarImage is Avatar.Image, and AvatarFallback is Avatar.Fallback. AvatarGroupCount takes the same props as Avatar, and its children go inside a fallback.

AvatarGroupCopy Anchor Link

Also accepts every native <div> attribute.

Custom propertiesCopy Anchor Link