Avatar

Represents a person or entity with an image and resilient fallback content.

@rivetui/avatar

Preview

Explore each composition interactively, then open its code in the same context.

Pair an image with initials so identity remains visible while the asset loads or fails.

Note

AvatarFallback is shown automatically when AvatarImage is unavailable.

Ada Lovelace

platform / owner

Use the three semantic sizes to align avatars with compact controls, rows, or profile summaries.

ALGHMH

Collapse a team into overlapping identities and summarize the remainder with AvatarGroupCount.

ALGHMH+4

Registry

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/avatar

Public interface

Component-specific props are listed here. Native element and Base UI props continue to pass through.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`

Prop	Type	Default
`delay`	`number`	`0`