Skip to content

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

Free

Avatar Standard for Vue

A round photo with the initials CN ready as the fallback if that picture is missing or fails to load.

UI library: Ark UI

A round photo is on screen. The initials CN are the fallback, shown only if that picture is missing or fails.

Use it in profiles, comments, and member lists, anywhere a person needs a face. A status word can sit in a Badge beside the name. In Vue, Ark UI does not fetch the photo.

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

<Avatar>
  <AvatarImage
    alt="@shadcn"
    :height="32"
    src="https://github.com/shadcn.png"
    :width="32"
  />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

FAQ

When do the initials show?

AvatarFallback sits next to AvatarImage and shows when the image is missing or fails to load. This file puts the letters CN there. The muted background comes from the avatar styles.

What alt text should the photo use?

AvatarImage takes alt. Use the person's name. When that name is already written next to the avatar, an empty alt keeps it from being read twice.

How big is this avatar, and how do I change it?

size is left at the default, and the image sets width and height to 32 so the photo matches the circle. size also accepts sm and lg, and the fallback text scales with it.

Where does the round shape come from?

The avatar styles set rounded-full on Avatar, the image, the fallback, and the hairline after: border. This file doesn't pass a radius.

What does a screen reader hear?

The image is announced from alt, and the fallback from its text. Keep a real name in alt when the avatar is the only place that name appears.

How do I add a status dot to this avatar?

Put an AvatarBadge inside Avatar and give it a background class. It sits on the bottom end corner, with a ring in the background color.

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