Skip to main content
ninna-ui
Components

React Avatar Components

Profile images with automatic fallback to initials, group stacking, and status indicators — all accessible.

import { Avatar } from "@ninna-ui/primitives";

<Avatar src="/user.jpg" name="Alice" size="md" />
<Avatar name="Bob" size="lg" />
<Avatar.Group max={4}>
  <Avatar name="Alice" />
  <Avatar name="Bob" />
  <Avatar name="Carol" />
  <Avatar name="Dan" />
  <Avatar name="Eve" />
</Avatar.Group>

Key features

Automatic fallback to initials when image fails to load

Four sizes: sm, md, lg, xl

Avatar.Group with stacking and overflow count

Status indicator dot (online, offline, busy)

Border and ring customization

data-slot CSS target for deep styling

Smart image fallback

The Avatar component tries to load the src image. If it fails (404, network error, empty string), it automatically falls back to the user's initials derived from the name prop. This prevents broken image icons in production.

Component Docs

AvatarBadge

FAQ