Skip to content

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

Free

Avatar with Verification Check (Square) for React

A square photo with a check badge at the bottom corner. The hidden label for that check says Verified.

A photo with square corners has a check badge at the bottom corner, in the info color. A hidden label says Verified. The initials CN show only if the picture fails.

Use it for an official organization, a first-party app, or a vetted partner. The check is not a review. Spell the status out in a Badge when the icon is not enough. In React, Base UI does not vet the account.

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

Anatomy

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

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-1 -bottom-1 flex size-4 items-center justify-center rounded-full bg-background">
    <BadgeCheckIcon
      aria-hidden="true"
      className="size-full fill-info text-background"
    />
    <span className="sr-only">Verified</span>
  </span>
</div>

FAQ

How is the avatar squared off around the check?

rounded-lg is on Avatar, AvatarImage, and AvatarFallback, and after:rounded-lg is on Avatar. The check is a separate circle on the wrapper, so it doesn't take those classes.

How is the checkmark built?

A span at -end-1 -bottom-1 is size-4, rounded-full, and bg-background. BadgeCheckIcon uses fill-info and text-background, at size-full.

How is the check announced?

The icon is aria-hidden. Visually hidden "Verified" in the span is the name.

Which corner does the check use?

The bottom end, via -end-1 -bottom-1 on a relative w-fit wrapper. The end edge flips in a right-to-left page.

What shows if the image fails?

AvatarFallback shows CN with rounded-lg. AvatarImage still has alt and width and height of 32.

How do I recolor the check?

Replace fill-info. text-background is the cutout of the check mark, and bg-background is the chip behind the icon.

API Reference

Avatar

Sets alt="@shadcn", height={32}, src="https://github.com/shadcn.png" and width={32}. The rest is on the Avatar page.

All 14 avatar examples