Content & display

Avatar

Q: How do people describe a Avatar in plain words?

the little round profile picture next to a name my photo circle in the top-right corner initials in a circle when there's no photo

Q: How do I implement a Avatar?

Add a user avatar with image URL, initials fallback, and alt text empty when the name is shown beside it; support a small status dot if online presence is required.

A compact image or initials representing a person or entity.

Also known as profile photo · user image · face icon

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Avatar".

Add a user avatar with image URL, initials fallback, and alt text empty when the name is shown beside it; support a small status dot if online presence is required.

Anatomy:
- image: Photo clipped to circle or rounded square.
- fallback: Initials or icon when the image fails or is missing.

Preferred API / pattern: `shadcn Avatar`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Broken image with no fallback initials.
○Avoid: Avatar-only control without accessible name.
○Avoid: Huge unoptimized photos in 32px circles

In plain wordsHow people search for it

“the little round profile picture next to a name”“my photo circle in the top-right corner”“initials in a circle when there's no photo”

AnatomyOpen for part names

image: Photo clipped to circle or rounded square.
fallback: Initials or icon when the image fails or is missing.

How to write itOpen for stack patterns

Web (HTML/CSS)img / initials span

React + Tailwind + shadcn/uishadcn Avatar

SwiftUIImage / Circle clip

Ant Design<Avatar> / <Avatar.Group>

Notes

Always provide a fallback. Decorative avatars next to a visible name can be empty alt; standalone avatars need an accessible name. Groups stack with overlap—cap visible faces and show +N.

Common mistakesHumans and models trip here

Broken image with no fallback initials.
Avatar-only control without accessible name.
Huge unoptimized photos in 32px circles: serve sized assets.

More failure symptoms on AI broke it.

Related patterns

BadgeA compact count or status mark attached to an icon, tab, or label.CardA contained surface grouping related content and actions as one unit.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.

Spotted a wrong name or missing pattern?

Message on X