Component

Avatar

Represents a user or entity with an image, initials, or fallback content.

$pnpm dlx @stalk-ui/cli add @stalk-ui/avatar

<Avatar name="Ada Lovelace" />

<Avatar
  src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop"
  name="Ada Lovelace"
  size="lg"
/>

<Avatar name="Linus Torvalds" tone="success" radius="md" />

Prop	Type	Required	Default	Description
`src`	`string`	No	-	Image source. When omitted or fails to load, falls back to initials / \`fallback\`.
`alt`	`string`	No	-	Alt text for the image; also used to derive initials when \`name\` is not set.
`name`	`string`	No	-	Name used to derive 2-letter initials. Falls back to \`alt\`.
`fallback`	`ReactNode`	No	-	Custom fallback content (icon, custom initials, etc.). Overrides derived initials.
`fallbackDelay`	`number`	No	-	Delay (ms) before showing the fallback while the image loads. Defaults to 600.
`loading`	`'eager' \	'lazy'`	No	-
`onLoadingStatusChange`	`AvatarImageProps['onLoadingStatusChange']`	No	-	Called when the image's loading state changes.
Prop	`Type`	Required	Default	Description
`size`	`AvatarSize`	No	-	Match the size on the parent \`AvatarRoot\` so fallback text scales correctly.
Prop	`Type`	Required	Default	Description
`radius`	`AvatarRadius`	No	-	-
`size`	`AvatarSize`	No	-	-
`tone`	`AvatarTone`	No	-	Selects the semantic color palette used as the fallback background.

Variant	Values
`size`	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`
`radius`	`none`, `sm`, `md`, `lg`, `full`

Install