Avatar with Count Indicator (Square) for Ark UI

Q: 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.

Q: 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".

Q: 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.

Q: 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.

Q: 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.

Q: 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".

A square photo with a destructive badge at the top corner. The badge shows 3, and its hidden words say unread messages.

A photo with square corners has a destructive badge at the top corner. The badge shows 3. Hidden words in that badge say unread messages. The number is fixed in the demo.

Use it for pending items on a workspace or an app, not for a person's chat. Show the real count. A Badge beside the name is clearer when the corner already has a status. In React, Ark UI does not track the count.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

<div className="relative w-fit">
  <Avatar className="rounded-lg after:rounded-lg">
    <AvatarImage
      alt="@shadcn"
      className="rounded-lg"
      height={32}
      src="https://github.com/shadcn.png"
      width={32}
    />
    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
  </Avatar>
  <span className="absolute -end-2.5 -top-2.5 rounded-full bg-background p-0.5">
    <Badge pill size="sm" variant="destructive">
      3<span className="sr-only"> unread messages</span>
    </Badge>
  </span>
</div>

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.