Avatar Extended

Installation

pnpm dlx shadcn@latest add @spaceui/components-spaceui-avatar-extended

Anatomy

import { Avatar, AvatarImage } from '@/components/ui/avatar'
import {
  AvatarExtended,
  AvatarFallback,
  AvatarRing,
  AvatarBadge,
  AvatarIndicator,
  AvatarIcon,
} from '@/components/spaceui/avatar-extended'

export default () => (
  <AvatarExtended>
    <Avatar>
      <AvatarImage />
      <AvatarFallback>U</AvatarFallback>
    </Avatar>

    <AvatarRing className="ring-primary" />
    <AvatarIndicator className="bg-emerald-500" />
    <AvatarBadge>+6</AvatarBadge>
    <AvatarIcon>
      <IconCheck className="size-3" />
    </AvatarIcon>
  </AvatarExtended>
)

Features

Verified Icon & Company Logo

Use the AvatarIcon component to display small status indicators, verified badges, or company logos at the corner of the avatar.

Avatar Rings

Apply custom selection states or decorative borders using the AvatarRing component with standard utility classes.

AvatarFallback

Generates a procedural avatar image from a name via the SpaceUI Avatars API. It replaces the primitive <AvatarFallback> with a rich, generated image instead of initials.

AvatarFallback Variants

Pass a variant prop to choose a specific style family. Defaults to 'all' which lets the API pick a random style.

Avatar Badges (Counts)

Display unread notifications or counters cleanly over the avatar using the AvatarBadge component.

API Reference

AvatarFallback

Generates a procedural avatar image from the SpaceUI Avatars API. Extends React.ImgHTMLAttributes<HTMLImageElement>.

AvatarVariant values:

AvatarExtended

The root wrapper component that establishes the relative positioning context. Extends React.HTMLAttributes<HTMLDivElement>.

AvatarRing

An absolute overlay that applies a decorative ring or focus outline around the avatar. Extends React.HTMLAttributes<HTMLSpanElement>.

No specific props. Use className to pass Tailwind ring utility classes (e.g. ring-primary ring-offset-2).

AvatarIndicator

A small status dot positioned at the bottom right by default, used for online/offline states. Extends React.HTMLAttributes<HTMLSpanElement>.

No specific props. Use className to set the color (e.g. bg-emerald-500).

AvatarBadge

A notification counter or badge positioned at the top right. It wraps the standard Badge primitive. Extends BadgeProps.

AvatarIcon

A wrapper used to absolutely position small icons, logos, or verified checkmarks at the bottom right. Extends React.HTMLAttributes<HTMLDivElement>.