Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar Standard for React

A round avatar with a profile picture and initials as the fallback.

Framework
UI library

Every app with people in it needs avatars, the small round photos that put a face next to a name. This React avatar pairs an AvatarImage for the photo with an AvatarFallback holding initials, which take over when the image is missing or fails to load. Use it in profiles, comment threads, member lists, or anywhere a person needs a face.

Preview

Preview width
CN

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When do the initials show?

AvatarFallback sits next to AvatarImage and shows when the image is missing or fails to load. This file puts the letters CN there. The muted background comes from the avatar styles.

What alt text should the photo use?

AvatarImage takes alt. Use the person's name. When that name is already written next to the avatar, an empty alt keeps it from being read twice.

How big is this avatar, and how do I change it?

size is left at the default, and the image sets width and height to 32 so the photo matches the circle. size also accepts sm and lg, and the fallback text scales with it.

Where does the round shape come from?

The avatar styles set rounded-full on Avatar, the image, the fallback, and the hairline after: border. This file doesn't pass a radius.

What does a screen reader hear?

The image is announced from alt, and the fallback from its text. Keep a real name in alt when the avatar is the only place that name appears.

How do I add a status dot to this avatar?

Put an AvatarBadge inside Avatar and give it a background class. It sits on the bottom end corner, with a ring in the background color.

All 14 avatar examples