ComponentsDisplay

Avatar

A person's picture with initials as the fallback.

Playground

<Avatar name="Ada Lovelace" />

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Avatar } from "junco";

<Avatar src={user.image} name={user.name} />

Overlap avatars with negative margin and a ring in the page background color.

src: Image URL. Falls back to initials while loading or on error.; string
name: The person's name: alt text and initials.; string
fallback: Custom fallback content instead of initials.; ReactNode
size: 24, 32, 40 or 48px.; "xs" | "sm" | "md" | "lg"; Default: "md"
shape: Square suits teams and orgs.; "circle" | "square"; Default: "circle"
classNames: Slot overrides.; { root?, image?, fallback? }

Prop	Type	Default
`src` Image URL. Falls back to initials while loading or on error.	`string`	`–`
`name` The person's name: alt text and initials.	`string`	`–`
`fallback` Custom fallback content instead of initials.	`ReactNode`	`–`
`size` 24, 32, 40 or 48px.	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`
`shape` Square suits teams and orgs.	`"circle" \| "square"`	`"circle"`
`classNames` Slot overrides.	`{ root?, image?, fallback? }`	`–`

The image gets the name as alt text; the initials fallback is role=img with the name as its label.
Initials are hidden from screen readers so the name isn't read twice.
If an avatar sits next to the visible name, pass name anyway; it keeps the image meaningful when shown alone.