React Avatar Component

SKOALP

ASBRCWDM+2

Installation

pnpm add krz-ui

import { Avatar, AvatarGroup } from "krz-ui";

<Avatar name="Sara Khan" status="online" />

<AvatarGroup max={4}>
  <Avatar name="Ava Stone" />
  <Avatar name="Ben Ray" />
</AvatarGroup>

Prop	Type	Description
`src`	`string`	Image URL.
`name`	`string`	Used for initials fallback and alt text.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	Avatar size.
`shape`	`"circle" \| "square"`	Avatar shape.
`status`	`"online" \| "offline" \| "busy" \| "away"`	Status indicator.
`className / style / ref`	`—`	All go to the outer element. See Customization.
`classNames`	`{ image?, fallback?, status?, more? }`	Extra classes for inner parts. (`more` is on AvatarGroup.)