Layout Avatar

Avatar

A face: a Zobu, a photo, or initials while it loads (Radix Avatar).

Preview

Zobus

ZBZBZB

Initials

AMPSRS

A group

ZBZBZBNPVK+5

Usage

tsx

import { Avatar, AvatarImage, AvatarFallback } from "zostel-ui";

<Avatar>
  <AvatarImage src="/brand/zobu/pfp-07.png" alt="A Zobu" />
  <AvatarFallback>ZB</AvatarFallback>
</Avatar>

Parts

Prop	Type	Default	Description
`Avatar`	`span`	—	40 px circle; size it with className (h-14 w-14).
`AvatarImage`	`{ src, alt }`	—	Shown once it loads. Use the Zobus (/brand/zobu), never stock photos.
`AvatarFallback`	`span`	—	Shown until then (or if it fails): initials.

Avatar

Type: span

Default: —

40 px circle; size it with className (h-14 w-14).

AvatarImage

Type: { src, alt }

Default: —

Shown once it loads. Use the Zobus (/brand/zobu), never stock photos.

AvatarFallback

Type: span

Default: —

Shown until then (or if it fails): initials.