Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Avatar with Placeholder Initials (Square) for React

A square avatar with no photo at all. The letters CN sit in the square on the muted background.

An avatar with square corners and no photo shows the letters CN on the muted background. There is no image to load.

Use it for a company, a team, or a workspace that has no logo yet. People still read better as a round Avatar. In React, Base UI does not generate the letters.

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

Anatomy

Avatar anatomy: image, badge, fallback, group, group count

Usage

<Avatar className="rounded-lg after:rounded-lg">
  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>

FAQ

How is the square applied with no photo?

rounded-lg is on Avatar and AvatarFallback, and after:rounded-lg is on Avatar for the border. There is no AvatarImage to round.

What does the fallback show?

The text CN. With no image, that fallback is always the face, centered in the square.

What color is the square?

Muted background and muted foreground, from the avatar styles. This file doesn't set a background class.

How do I change the letters?

Replace CN. Keep it to one or two characters so they fit the default size.

How do I resize it?

Set size on Avatar to sm, default, or lg. The fallback type scale follows sm.

How do I add a photo without losing the square?

Add AvatarImage with src, alt, width, height, and rounded-lg. The initials show when that image is missing or fails.

API Reference

Avatar

No extra props in this demo. The rest is on the Avatar page.

All 14 avatar examples