Components

AvatarCircle

The gradient-initial chip (or photo) used everywhere an avatar appears — bubbles, headers, clusters. Framework-agnostic: plain <img>, no Next dependency.

"use client";

import { AvatarCircle } from "imessage-ui";

export default function AvatarCircleDemo() {
  return (
    <div className="flex items-end gap-4">
      <AvatarCircle avatar={{ initial: "W", gradient: ["#7B8FFF", "#5057E0"] }} size={56} />
      <AvatarCircle avatar={{ initial: "R", gradient: ["#FF9FB2", "#E0506E"] }} size={40} />
      <AvatarCircle avatar={{ initial: "D", gradient: ["#FFD89B", "#E89B53"] }} size={28} />
      <AvatarCircle
        avatar={{
          initial: "W",
          gradient: ["#000", "#333"],
          photoUrl: "/portfolio/images/me/me-01.jpg",
        }}
        size={56}
      />
    </div>
  );
}

Usage

import { AvatarCircle } from "imessage-ui";

<AvatarCircle avatar={{ initial: "W", gradient: ["#7B8FFF", "#5057E0"] }} size={34} />

API reference

Prop	Type	Default	Description
avatar*	AvatarInfo	—	initial + [from, to] gradient, with an optional photoUrl that replaces the gradient.
size*	number	—	Diameter in px; the initial scales with it.
showInitial	boolean	true	Hide the letter while keeping the gradient.
className / style	string / CSSProperties	—	Passthrough to the chip.

Accessibility

Decorative (aria-hidden) by design — name the person in adjacent text, as ChatBubble's senderName does.