Skip to content

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

Free

Avatar with Verification Check (Standard) for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not verify the person.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="relative w-fit">
    <Avatar>
      <AvatarImage alt="@shadcn" height={32} src="https://github.com/shadcn.png" width={32} />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <span class="absolute -end-1 -bottom-1 flex size-4 items-center justify-center rounded-full bg-background">
      <BadgeCheckIcon aria-hidden="true" class="size-full fill-info text-background" />
      <span class="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