Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar with Count Indicator (Square) for React

A square avatar with a red count of unread messages at its top corner.

Framework
UI library

On a square avatar, a count usually belongs to a workspace or an app rather than a person: pending items, failed syncs, unread alerts. This React avatar is rounded-lg, and a small destructive Badge with the number 3 sits over its top corner, ringed in the background color so it stands off the picture. Use it in workspace switchers and integration lists.

Preview

Preview width

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

How do I keep the count on a square avatar?

rounded-lg goes on Avatar, AvatarImage, and AvatarFallback, and after:rounded-lg on Avatar so the border matches. The count sits on the wrapper, outside those classes.

How is the unread count built?

It is a Badge with pill, size="sm", and variant="destructive". The visible text is 3, plus visually hidden "unread messages".

How is the count positioned?

The wrapper is relative w-fit. The badge span is absolute -end-2.5 -top-2.5, with rounded-full bg-background p-0.5 for the gap around the pill. -end follows the writing direction.

How do I change the number?

Replace the text 3. There is no count prop. Change the hidden words when the number means something else.

What happens if the photo fails?

AvatarImage sets alt and a 32 by 32 size. AvatarFallback shows CN, still rounded-lg, when the image is missing or fails.

How do I change the count color?

variant="destructive" paints it red. Pass default or secondary for another badge color, and keep pill and size="sm".

All 14 avatar examples