Components

LiquidGlassHeader

The iOS 26 header: floating frosted-glass capsules (back pill with unread count, centred avatar/name pill, FaceTime button) hovering over the messages. Pure CSS — cross-browser, cheap, auto-themed from the tokens.

Riley

the frosted capsules float over the scroll

pure CSS, themes itself from the tokens

"use client";

import { LiquidGlassHeader, IMessageThread, ChatBubble } from "imessage-ui";
import type { LiquidGlassHeaderParticipant } from "imessage-ui";

const PARTICIPANTS: LiquidGlassHeaderParticipant[] = [
  { id: "riley", avatar: { initial: "R", gradient: ["#FF9FB2", "#E0506E"] } },
  { id: "devon", avatar: { initial: "D", gradient: ["#7B8FFF", "#5057E0"] } },
  { id: "jess", avatar: { initial: "J", gradient: ["#FFD89B", "#E89B53"] } },
];

export default function LiquidGlassHeaderDemo() {
  return (
    <IMessageThread
      variant="glass"
      wallpaper="/memorymap/images/memorymap-12.jpg"
      followKeyboard={false}
      header={<LiquidGlassHeader bots={PARTICIPANTS} title="the group chat" unreadCount={3} />}
      className="h-80 w-full max-w-sm overflow-hidden rounded-2xl"
    >
      <div className="flex flex-col gap-1 px-3 pt-24">
        <ChatBubble variant="received" text="the frosted capsules float over the scroll" senderName="Riley" avatar={PARTICIPANTS[0].avatar} />
        <ChatBubble variant="sent" text="pure CSS, themes itself from the tokens" />
      </div>
    </IMessageThread>
  );
}

Usage

import { LiquidGlassHeader, IMessageThread } from "imessage-ui";

<IMessageThread variant="glass" wallpaper="/wall.jpg"
  header={<LiquidGlassHeader bots={participants} title="the group chat" />}>
  …
</IMessageThread>

API reference

Prop	Type	Default	Description
bots*	LiquidGlassHeaderParticipant[]	—	{ id, avatar } — one renders a single avatar (1-on-1), more render a 3-slot cluster.
title*	string	—	Name in the centre pill.
unreadCount	number	—	Count shown inside the back pill.
onBack / onCall / onOpenDetails	() => void	—	Capsule tap handlers.
className	string	—	Extra classes on the header.

Accessibility

The back and FaceTime capsules are real buttons with aria-labels; the avatar cluster is decorative.