Display

Avatar

Server Component

User image with a fallback.

Import

tsx

import { Avatar } from "@cronus-ui/ui";

bash

npx cronus-ui add avatar

Examples

Image & fallback

A user image alongside deterministic initials-only fallbacks.

CNALCU

tsx

<div className="flex items-center gap-4">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>AL</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>CU</AvatarFallback>
  </Avatar>
</div>

Group

A stack of overlapping avatars with a ring to separate each layer.

CNALJLMK+5

tsx

<div className="flex -space-x-3">
  {["CN", "AL", "JL", "MK"].map((initials) => (
    <Avatar key={initials} className="ring-2 ring-surface-raised">
      <AvatarFallback>{initials}</AvatarFallback>
    </Avatar>
  ))}
  <Avatar className="ring-2 ring-surface-raised">
    <AvatarFallback className="text-xs">+5</AvatarFallback>
  </Avatar>
</div>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

fallback.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AvatarFallback layout:inline style:avatar {
  label "AL"
}

page "/audit/avatar/fallback" type:custom {
  use AvatarFallback
}

API Reference

Generated from the component's exported types.

AvatarProps

Extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

AvatarImageProps

Extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>

Prop	Type	Default	Description
`src`	`string`	—	—
`alt`	`string`	—	—
`asChild`	`boolean`	—	Render as the child element via Slot.

AvatarFallbackProps

Extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>

Prop	Type	Default	Description
`delayMs`	`number`	—	Delay before showing the fallback.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.