Data & feedback@neumorphism-ui/avatar

Avatar

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.

@neumorphism-ui/avatar

Registry JSON

Preview

SMAMUI

Team

ANDESO

Installation

npx shadcn@latest add @neumorphism-ui/avatar

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<AvatarGroup>
  <Avatar size="lg">
    <AvatarImage src="/members/ana.jpg" alt="Ana Martins" />
    <AvatarFallback>AM</AvatarFallback>
    <AvatarBadge aria-label="Online" />
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>UI</AvatarFallback>
  </Avatar>
  <AvatarGroupCount aria-label="8 more members">+8</AvatarGroupCount>
</AvatarGroup>

API Reference

Component	Prop	Type	Default	Description
`Avatar`	`size`	`"sm" \| "default" \| "lg"`	`"default"`	Changes the size of the Avatar and its badge together.
`AvatarImage`	`src`	`string`	`—`	The URL of the image to display.
`AvatarImage`	`alt`required	`string`	`—`	Alternative text identifying the person or subject represented by the image.
`AvatarFallback`	`delayMs`	`number`	`0`	The delay before the fallback is displayed.
`AvatarBadge`	`children`	`React.ReactNode`	`—`	Displays a status dot or small status icon.