Avatar

PreviewCode

VV

CN

VV

SA

PV

+2

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/avatar

Anatomy#

Avatar
├── AvatarImage
└── AvatarFallback
 
AvatarGroup
├── AvatarGroupCount
└── Avatar
    ├── AvatarImage
    ├── AvatarFallback
    └── AvatarBadge

Usage#

import { 
  Avatar, 
  AvatarImage, 
  AvatarFallback 
} from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="https://github.com/vinihvc.png" />
  <AvatarFallback>VV</AvatarFallback>
</Avatar>

Sizes#

Small#

PreviewCode

VV

Medium#

PreviewCode

VV

Large#

PreviewCode

VV

Examples#

Avatar Group#

PreviewCode

VV

SA

PV

IA

Badge#

PreviewCode

VV

SA

PV

Badge with Icon#

PreviewCode

VV

Fallback with Icon#

Avatar Group Count#

PreviewCode

VV

SA

PV

IA

+5

Avatar Group Count Icon#

PreviewCode

VV

SA

PV

IA

Avatar with Popover#

PreviewCode

VV

SA

PV

IA

+5

Avatar with Hover Card#

PreviewCode

VV

CN

Custom Size#

Use size-* to set the size of the avatar.

PreviewCode

VV

You can use breakpoint utilities to change the size at different screen sizes.

  md:size-4 lg:size-8

Custom Radius#

Use rounded-* to set the radius of the avatar.

PreviewCode

VV

CN

SA

PV

You can use breakpoint utilities to change the radius at different screen sizes.

  md:rounded-full lg:rounded-lg

API Reference#

Avatar#

Container for user or entity profile image. Supports sizes and fallback.

AvatarImage#

Profile image. Shown when URL loads; fallback used on error.

AvatarFallback#

Shown when the image fails to load or is loading. Often initials or icon.

AvatarGroup#

Groups avatars with overlap and optional count badge.

AvatarGroupCount#

Shows "+N" when more avatars exist than displayed.

AvatarBadge#

Status or indicator badge overlaid on the avatar corner.

For a complete list of props, see the Ark UI documentation.