Skip to content
Pinky UI

message

Message Bubble

A staggered, spring-entrance chat bubble with distinct user and assistant tones.

  • message
  • chat
  • bubble
  • stagger

Live preview

How do I stream a response?
Reveal it token by token with Streaming Text.

Quick usage

usage
import { MessageBubble } from "@pinky-ui/ai-ui";

<MessageBubble role="assistant" index={0}>
  Here's what I found.
</MessageBubble>

Install

Add @pinky-ui/ai-ui as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/ai-ui

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
role"user" | "assistant"—Which side and tone the bubble renders in.
childrenReactNode—The message content.
avatarReactNode—Optional avatar rendered beside the bubble.
indexnumber0Position in the message list — later bubbles enter with a small extra delay, capped at six positions.
classNamestring—Applied to the outer flex row.

Accessibility

  • Each bubble is a labelled `role="group"` ("Your message" / "Assistant message") so a screen reader can distinguish turns without relying on position.

Performance

  • The entrance animates only opacity, `y` and `scale` — transform-only, no layout thrash.

Reduced motion

The bubble renders in its final position with no entrance animation.

When to use

  • Any chat or assistant conversation thread.

When not to use

  • Non-conversational content — this is a message-turn primitive, not a general card.