Zentauri UI
Display

Avatars for people and teams

Avatars show who is behind an action. Pair AvatarImage with AvatarFallback for resilient loading, and AvatarGroup when several people share a surface.

Sample userZU

Zentauri member

Image + fallback pairing

ABC+1

Sizes

SMMDLGXL

Avatar code examples

Use Show output / Show code on each row. Snippets start with a Variant line naming size or animation.

Size: SM

ZU

Size: MD

ZU

Size: LG

ZU

Size: XL

ZU

Appearance: DEFAULT

ZU

Appearance: MUTED

ZU

Appearance: SKY

ZU

Appearance: ROSE

ZU

Appearance: PURPLE

ZU

Appearance: PINK

ZU

Appearance: ORANGE

ZU

Appearance: YELLOW

ZU

Appearance: TEAL

ZU

Appearance: INDIGO

ZU

Appearance: EMERALD

ZU

Appearance: GRAY

ZU

Appearance: AMBER

ZU

Appearance: VIOLET

ZU

Appearance: GRADIENT-BLUE

ZU

Appearance: GRADIENT-GREEN

ZU

Appearance: GRADIENT-RED

ZU

Appearance: GRADIENT-YELLOW

ZU

Appearance: GRADIENT-PURPLE

ZU

Appearance: GRADIENT-TEAL

ZU

Appearance: GRADIENT-INDIGO

ZU

Appearance: GRADIENT-PINK

ZU

Appearance: GRADIENT-ORANGE

ZU

Animation: NONE

ZU

Animation: SUBTLE

ZU

Overview

Sizes map to common touch targets. Motion presets are intentionally subtle so they stay appropriate inside dense UI.

Common use cases

  • Headers and account menus.
  • Comment threads and activity feeds.
  • Table rows for assignees.
  • Stacked collaborators on documents.

FAQ

What happens when an image fails to load?

AvatarFallback renders when the image errors or while the image is still loading, with an optional delay to reduce flicker for fast caches.

How does AvatarGroup max work?

Pass max to cap visible avatars; additional participants surface as a +N overflow chip with an aria-label describing how many remain.