Avatar

An image element with a fallback for representing the user.

shadcn/ui docs
CN

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/avatar.json

Usage

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Default

CN

Fallback

CN

Basic

A basic avatar component with an image and a fallback.

CN

Badge

Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

CN

Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon

You can also use an icon inside <AvatarBadge>.

PP

Avatar Group

Use the AvatarGroup component to add a group of avatars.

CNLRER

Avatar Group Count

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

CNLRER
+3

Avatar Group with Icon

You can also use an icon inside <AvatarGroupCount>.

CNLRER

Sizes

Use the size prop ("sm", "default" or "lg") to change the size of the avatar.

CNCNCN

You can use the Avatar component as a trigger for a Dropdown Menu.