Avatar

A user avatar component with image, fallback initials, icon, status dot, and group support.

PREVIEW

Sizes

Fallback

Status

Group

INSTALLATION

bash

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx

import { Avatar, AvatarGroup } from "@kennbalino/kui";

// Image
<Avatar src="/photo.jpg" alt="Klein" />

// Fallback initials (when no image or image fails)
<Avatar fallback="KJ" />

// Icon fallback (when no src or fallback)
<Avatar />

// Sizes
<Avatar size="xs" fallback="KJ" />
<Avatar size="sm" fallback="KJ" />
<Avatar size="md" fallback="KJ" />  // default
<Avatar size="lg" fallback="KJ" />
<Avatar size="xl" fallback="KJ" />

// Status dot
<Avatar fallback="KJ" status="online"  />
<Avatar fallback="KJ" status="offline" />
<Avatar fallback="KJ" status="busy"    />
<Avatar fallback="KJ" status="away"    />

// Group with max overflow
<AvatarGroup max={3}>
  <Avatar fallback="KJ" />
  <Avatar fallback="AB" />
  <Avatar fallback="CD" />
  <Avatar fallback="EF" />
  <Avatar fallback="GH" />
</AvatarGroup>

PROPS

Prop	Type	Default	Description
src	string	—	Image URL for the avatar.
alt	string	—	Alt text for the avatar image.
fallback	string	—	Initials shown when image is missing or fails to load.
size	xs \| sm \| md \| lg \| xl	md	Controls the size of the avatar.
status	online \| offline \| busy \| away	—	Shows a status indicator dot on the avatar.
className	string	—	Additional CSS classes to apply.