Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar with Placeholder Initials (Standard) for React

A round avatar with no picture that shows initials as the placeholder.

Framework
UI library

Not everyone uploads a photo, and initials are the next best thing. This React avatar has no image: AvatarFallback shows CN centered in the circle on the muted background, matching the size of avatars that do have a picture. Use it for new accounts and anywhere profile photos are optional.

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

Why are the initials always visible?

There is no AvatarImage, so AvatarFallback is the avatar. The text is CN, and the fallback centers it.

Where does the background color come from?

The avatar styles set a muted background and muted foreground on AvatarFallback. This file doesn't pick a color from the name.

How do I change the initials?

Replace the text CN. One or two letters fit the default size.

How do I change the size?

Set size on Avatar to sm, default, or lg. The fallback text gets smaller on sm. This file uses the default.

What does a screen reader hear?

The letters in the fallback. When those letters aren't a full name, put the name next to the avatar or as extra text in the fallback.

How do I show a photo when I have one?

Add AvatarImage with src, alt, width, and height beside the fallback. The initials show when the image is missing or fails.

All 14 avatar examples