Skip to content

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

Free

Avatar with Verification Check (Standard) for React

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

A round photo has a check badge at the bottom corner, in the info color, on a small background circle. A hidden label says Verified. The initials CN show only if the picture fails.

Use it for an official account, a verified creator, or staff. The check does not prove anything until your own rules set it. A text label fits a Badge if the icon is unclear. In React, Base UI does not verify the person.

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>
    <AvatarImage
      alt="@shadcn"
      height={32}
      src="https://github.com/shadcn.png"
      width={32}
    />
    <AvatarFallback>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 checkmark built?

The avatar sits in a relative w-fit wrapper. A span at -end-1 -bottom-1 is a size-4 circle with bg-background, and BadgeCheckIcon fills it with fill-info and text-background.

How is the check announced?

The icon is aria-hidden. A visually hidden "Verified" in the same span is the accessible name.

How is the check positioned?

The span is absolute on the bottom end corner. -end-1 follows the writing direction, so the check moves in a right-to-left page.

How do I change the check color?

fill-info paints the badge and text-background punches the check. Swap fill-info for another fill token to recolor it.

What if the photo fails?

AvatarImage sets alt and a 32 by 32 size. AvatarFallback shows CN when the image is missing or fails. The check stays on the wrapper.

Can the check say something other than Verified?

Yes. Change the visually hidden text. The icon stays aria-hidden, so that text is the only thing announced.

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