iMessage UIv0.1.0

Components

TypingIndicator

The tailed gray bubble with three pulsing dots — the real iMessage typing indicator is a received bubble with the same bottom-left tail curl, not a plain pill.

you seeing this??
"use client";

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

const DEVON: AvatarInfo = { initial: "D", gradient: ["#7B8FFF", "#5057E0"] };

export default function TypingIndicatorDemo() {
  return (
    <IMessageScreen className="w-full max-w-sm rounded-2xl p-4">
      <ChatBubble variant="sent" text="you seeing this??" />
      <TypingIndicator senderName="Devon" avatar={DEVON} />
    </IMessageScreen>
  );
}

Usage

import { TypingIndicator } from "imessage-ui";

<TypingIndicator senderName="Riley" avatar={{ initial: "R", gradient: ["#FF9FB2", "#E0506E"] }} />

API reference

PropTypeDefaultDescription
senderNamestring—Used in the aria-label ("Riley is typing").
avatarAvatarInfo—Avatar beside the bubble.

Accessibility

Exposes "{name} is typing" as an aria-label; the dot pulse pauses under prefers-reduced-motion.