Skip to content

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

Free

Avatar with Offline Indicator (Square) for Solid

A square photo with a muted dot at the bottom corner. The hidden label for that dot says Offline.

UI library: Ark UI

A photo with square corners has a muted dot at the bottom corner. A hidden label on the dot says Offline. The initials CN show only if the picture fails.

Use it for an integration or a service that is disconnected, not for a person who stepped away. Pair it with a round photo for people. A Badge can spell out Offline if the dot is too quiet. In Solid, Ark UI does not detect the outage.

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">
    <AvatarImage alt="@shadcn" class="rounded-lg" height={32} src="https://github.com/shadcn.png" width={32} />
    <AvatarFallback class="rounded-lg">CN</AvatarFallback>
    <AvatarBadge class="bg-muted-foreground">
      <span class="sr-only">Offline</span>
    </AvatarBadge>
  </Avatar>

FAQ

How is the square avatar set up?

rounded-lg goes on Avatar, AvatarImage, and AvatarFallback, plus after:rounded-lg on Avatar for the border. The status dot stays circular.

How is the offline dot made?

AvatarBadge has bg-muted-foreground and sits on the bottom end corner with a ring. The muted token follows the theme.

What names the dot for assistive tech?

A visually hidden "Offline" inside AvatarBadge. The icon slot is empty, so that text is the whole label.

What shows when there is no photo?

AvatarFallback shows CN with the same rounded-lg. AvatarImage still has alt and a 32 by 32 size for when the photo loads.

How do I resize the avatar and the dot?

Set size on Avatar to sm, default, or lg. This file uses the default, and the badge scales from that prop.

How do I recolor the offline dot?

Replace bg-muted-foreground. Change the hidden "Offline" string in the same place if the status means something else.

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