Components

IMessageScreen

The token scope. Establishes the full --imsg-* palette (light by default, flipped by a .dark ancestor), base typography and the chat backdrop — without imposing any layout, so it works as a full screen or a small embedded panel.

Riley

same components

different token scope

Riley

same components

different token scope

"use client";

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

/**
 * IMessageScreen only establishes the --imsg-* token palette + backdrop.
 * Tokens are light by default and flip automatically under a `.dark`
 * ancestor — the left screen follows the site theme, the right one is
 * forced dark by its wrapper.
 */
export default function ScreenDemo() {
  const thread = (
    <>
      <ChatBubble variant="received" text="same components" senderName="Riley" avatar={{ initial: "R", gradient: ["#FF9FB2", "#E0506E"] }} />
      <ChatBubble variant="sent" text="different token scope" />
    </>
  );

  return (
    <div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
      <IMessageScreen className="rounded-2xl p-4">{thread}</IMessageScreen>
      <div className="dark">
        <IMessageScreen className="rounded-2xl p-4">{thread}</IMessageScreen>
      </div>
    </div>
  );
}

Usage

import { IMessageScreen } from "imessage-ui";

<IMessageScreen>
  {/* bubbles pick up the palette from here */}
</IMessageScreen>

API reference

Prop	Type	Default	Description
children*	ReactNode	—	Anything that should read the --imsg-* tokens.
variant	"default" \| "glass"	"default"	Opaque classic look, or iOS 26 Liquid Glass (translucent bubbles + chrome). Provided to descendants via context.
wallpaper	string	—	Image URL or any CSS background value — the glass variant frosts it.
className / style	string / CSSProperties	—	Passthrough to the scope element.