Neumorphism UI

Avatar

Use Avatar to identify a person or team in a profile, member list, or shared workspace.

Preview

Sizes and team grouping

Compare initials at three avatar sizes with status badges, then show a team group and an additional-member count.

SMAMUI
Team
ANDESO
+9

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/avatar

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Pair AvatarImage with AvatarFallback so identification survives an unavailable image. Add AvatarBadge for status, or group people with AvatarGroup and AvatarGroupCount.

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

export default function Example() {
  return (
    <Avatar>
      <AvatarFallback role="img" aria-label="Alex Kim">AK</AvatarFallback>
    </Avatar>
  );
}

API Reference

Built on Base UI Avatar to manage image loading and fallback transitions. Provides three sizes, a status badge, overlapping groups, and a remaining-member count.

ComponentPropTypeDefaultDescription
Avatarsize"sm" | "default" | "lg""default"Changes the size of the Avatar and its badge together.
AvatarImagesrcstring—The URL of the image to display.
AvatarImagealtrequiredstring—Alternative text identifying the person or subject represented by the image.
AvatarFallbackdelaynumber0The delay before the fallback is displayed.
AvatarBadgechildrenReact.ReactNode—Displays a status dot or small status icon.

Accessibility

  • 01

    Use the person's name as alt text for an identifying image; an empty alt is acceptable when the same name appears next to it.

  • 02

    If AvatarBadge conveys meaning such as online status, provide an aria-label or visually hidden text.

  • 03

    Add an aria-label that explains the meaning of a count such as +8 in AvatarGroupCount.