iMessage UIv0.1.0

Components

ReactionBubble & ReactionGlyph

Tapbacks. ReactionBubble is the laid reaction — the 29px circle with two trailing dots, mirrored for sent messages, with a count badge for stacks. ReactionGlyph is the bare icon for pickers and custom UI.

"use client";

import { ReactionBubble, ReactionGlyph, IMessageScreen } from "imessage-ui";

export default function ReactionsDemo() {
  return (
    <IMessageScreen className="flex w-full max-w-sm flex-col items-center gap-6 rounded-2xl p-6">
      {/* Laid tapbacks — anchored to a bubble corner in real threads. */}
      <div className="flex items-center gap-4">
        <ReactionBubble kind="heart" side="left" />
        <ReactionBubble kind="like" side="right" />
        <ReactionBubble kind="dislike" side="left" count={3} />
      </div>
      {/* Bare glyphs — for pickers and custom UI. */}
      <div className="flex items-center gap-3">
        <ReactionGlyph kind="heart" />
        <ReactionGlyph kind="like" />
        <ReactionGlyph kind="dislike" size={30} />
      </div>
    </IMessageScreen>
  );
}

Usage

import { ReactionBubble, ReactionGlyph } from "imessage-ui";

<ReactionBubble kind="heart" side="left" count={2} />
<ReactionGlyph kind="like" size={24} />

API reference

ReactionBubble

PropTypeDefaultDescription
kind*"heart" | "like" | "dislike"—Which tapback.
side*"left" | "right"—Anchoring side — right mirrors the tail dots for sent bubbles.
countnumber—Stack badge when more than one person reacted.

ReactionGlyph

PropTypeDefaultDescription
kind*"heart" | "like" | "dislike"—Which glyph.
sizenumber22Icon size in px.