iMessage UIv0.1.0

Components

ChatHeader

The classic iOS group-chat header: staggered avatar cluster (Figma-transcribed slot positions), back button and title/subtitle. Fixed full-screen chrome by default, or static with `embedded`.

4 People
"use client";

import { ChatHeader, IMessageScreen } from "imessage-ui";
import type { ChatHeaderBot } from "imessage-ui";

const BOTS: ChatHeaderBot[] = [
  { id: "riley", avatar: { initial: "R", gradient: ["#FF9FB2", "#E0506E"] } },
  { id: "devon", avatar: { initial: "D", gradient: ["#7B8FFF", "#5057E0"] } },
  { id: "jess", avatar: { initial: "J", gradient: ["#FFD89B", "#E89B53"] } },
  { id: "sam", avatar: { initial: "S", gradient: ["#9BE8AF", "#3EA45C"] } },
];

export default function ChatHeaderDemo() {
  return (
    <IMessageScreen className="w-full max-w-sm rounded-2xl">
      {/* `embedded` keeps the header in normal flow instead of position:fixed. */}
      <ChatHeader bots={BOTS} title="the group chat" embedded />
    </IMessageScreen>
  );
}

Usage

import { ChatHeader } from "imessage-ui";

<ChatHeader bots={participants} title="the group chat" embedded />

API reference

PropTypeDefaultDescription
bots*ChatHeaderBot[]—{ id, avatar } participants; the cluster caps at 6 slots.
titlestring"the group chat"Group title under the cluster.
subtitlestring"{n} People"Second line; defaults to the participant count.
onReset() => void—Back-button handler (labelled "Reset conversation").
embeddedbooleanfalseStatic flow instead of position:fixed full-screen chrome.