Pepulux Playbook

Messaging

Chat bubble components for sent and received messages. Includes typing indicator and full conversation layout.

import{ MessageBubble, MessageInput, TypingIndicator } from "@pepulux/ui"

Message bubbles

OR

Olivia Rhye

10:30 AM

Hey! Can you review the latest design?
Sure, sending feedback now.
OR

Olivia Rhye

10:33 AM

Thanks! I've added comments inline.

Typing indicator

?

Props

PropTypeDefaultDescription
message*ChatMessage—Message object — { id, text, status, senderName?, timestamp?, senderAvatar?, reactions? }
status*"sent" | "received"—Message direction — determines alignment and color (field on ChatMessage)
senderNamestring—Sender display name (shown for received messages)
timestampstring—Formatted timestamp string
reactionsMessageReaction[]—Emoji reactions array
Application component → Messagingwww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Conversations

Sent and received bubbles use different alignment and corner shapes. Group consecutive messages from one sender and show a typing indicator while the other person writes.