Skip to content

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

Free

Avatar with Placeholder Initials (Square) for Vue

A square avatar with no photo at all. The letters CN sit in the square on the muted background.

UI library: Ark UI

An avatar with square corners and no photo shows the letters CN on the muted background. There is no image to load.

Use it for a company, a team, or a workspace that has no logo yet. People still read better as a round Avatar. In Vue, Ark UI does not generate the letters.

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 class="rounded-lg after:rounded-lg">
  <AvatarFallback class="rounded-lg">CN</AvatarFallback>
</Avatar>

FAQ

How is the square applied with no photo?

rounded-lg is on Avatar and AvatarFallback, and after:rounded-lg is on Avatar for the border. There is no AvatarImage to round.

What does the fallback show?

The text CN. With no image, that fallback is always the face, centered in the square.

What color is the square?

Muted background and muted foreground, from the avatar styles. This file doesn't set a background class.

How do I change the letters?

Replace CN. Keep it to one or two characters so they fit the default size.

How do I resize it?

Set size on Avatar to sm, default, or lg. The fallback type scale follows sm.

How do I add a photo without losing the square?

Add AvatarImage with src, alt, width, height, and rounded-lg. The initials show when that image is missing or fails.

API Reference

Avatar

No extra props in this demo. The rest is on the Avatar page.

All 14 avatar examples