React Avatar & Avatar Group
An avatar with an image and an initials fallback (deterministic tinted background), four sizes, and an optional presence status dot. AvatarGroup stacks avatars with a +N overflow.
HKADKYSA
HKADKYSA
HKADKYSA+3
Installation
npx shadcn@latest add "https://kelvinui.com/registry/avatar.json"
Props
| Prop | Type | Description |
|---|---|---|
| name | string | Used for the alt text and initials |
| src | string | Image URL (falls back to initials) |
| size | "sm" \ | "md" \ |
| status | "online" \ | "busy" \ |
AvatarGroup takes avatars ({ src?, name }[]), max (default 4), and size.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.