iMessage UIv0.1.0

Components

ImageBubble

An image attachment in the same row/avatar/sender-name layout as ChatBubble. Aspect ratio comes from the attachment's intrinsic dimensions, so nothing shifts while the image loads.

Riley
A skyline photo Riley sent
look at this view
okay that's unreal
Read
"use client";

import { ImageBubble, ChatBubble, IMessageScreen } from "imessage-ui";
import type { AvatarInfo } from "imessage-ui";

const RILEY: AvatarInfo = { initial: "R", gradient: ["#FF9FB2", "#E0506E"] };

export default function ImageBubbleDemo() {
  return (
    <IMessageScreen className="w-full max-w-sm rounded-2xl p-4">
      <ImageBubble
        variant="received"
        position="first"
        senderName="Riley"
        attachment={{
          kind: "image",
          src: "/memorymap/images/memorymap-12.jpg",
          alt: "A skyline photo Riley sent",
          width: 400,
          height: 300,
        }}
      />
      <ChatBubble variant="received" text="look at this view" position="last" avatar={RILEY} />
      <ChatBubble variant="sent" text="okay that's unreal" receipt="read" />
    </IMessageScreen>
  );
}

Usage

import { ImageBubble } from "imessage-ui";

<ImageBubble
  variant="received"
  attachment={{ kind: "image", src: "/photo.jpg", alt: "…", width: 400, height: 300 }}
/>

API reference

PropTypeDefaultDescription
attachment*ImageAttachment—kind: "image", src, alt, width, height — intrinsic size drives the aspect ratio.
variant*"sent" | "received"—Which side the image sits on.
position"solo" | "first" | "middle" | "last""solo"Grouping position (same rules as ChatBubble).
senderNamestring—Shown above first/solo received images.
avatarAvatarInfo—Shown beside last/solo received images.

Accessibility

Always provide meaningful alt text on the attachment — it is the image's only text alternative.