Avatar

PreviewCode

VV

CN

VV

SA

PV

+2

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/avatar.json

Usage

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

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

Sizes

Use the size prop to change the size of the avatar.

Small

PreviewCode

VV

Medium

PreviewCode

VV

Large

PreviewCode

VV

Examples

Avatar Group

Use the <AvatarGroup /> to add a group of avatars.

PreviewCode

VV

SA

PV

IA

Badge

Use <AvatarBadge /> to show status indicators on avatars.

PreviewCode

VV

SA

PV

Badge with Icon

Add an icon to <AvatarBadge /> for actions like adding a user.

PreviewCode

VV

Fallback with Icon

Use an icon inside <AvatarFallback /> when you have no image or initials.

Avatar Group Count

Use <AvatarGroupCount /> to add a count to the group.

PreviewCode

VV

SA

PV

IA

+5

Avatar Group Count Icon

The <AvatarGroupCount /> also supports an icon.

PreviewCode

VV

SA

PV

IA

Avatar with Popover

Works with the <Popover> component to show additional information.

PreviewCode

VV

SA

PV

IA

+5

Avatar with Hover Card

Works with the <HoverCard> component to show user information on hover.

PreviewCode

VV

CN

Custom Size

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

PreviewCode

VV

Custom Radius

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

PreviewCode

VV

CN

SA

PV

Custom Colors

Customize the <AvatarFallback /> with a custom color.

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 (e.g. "+5").

AvatarBadge

Status or indicator badge overlaid on the avatar corner.

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