Avatar

Preview

Installation

Install the package using your preferred package manager:

npx shadcn@latest add @airy/avatar

Usage

Import the component from the package:

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

Then use it in your application:

<Avatar size={32}>
  <AvatarImage src="/person.jpg" alt="Person's name" />
  <AvatarFallback>PN</AvatarFallback>
</Avatar>

API

size accepts 12, 14, 20, 24, 32, 40, 48, 56, or 64. Omitting it gives a 32px circle. Existing sm, default, and lg values remain aliases for 24, 32, and 40.

shape defaults to circle. Use shape="square" for a square avatar with rounded corners at any size.

AvatarImage fills the avatar using object-cover. AvatarFallback displays when the image is unavailable. Add AvatarBadge for a status indicator; it is hidden at sizes 12, 14, and 20. The 2px gap around the badge is a transparent cutout that reveals the surface beneath.

Use the same size for avatars in an AvatarGroup. AvatarGroupCount follows their size.

Examples