Chat Bubble

Get Ritla UI

One message in a conversation with the sender's avatar, name and time, plus reactions and the typing indicator.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add chat-bubble
Also works with shadcn: npx shadcn@latest add @ritla/chat-bubble
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

chat-bubble.tsx

import { ChatBubble, ChatLog } from "@/components/ui/chat-bubble";<ChatLog aria-label="Conversation with support">  <ChatBubble name="Omar" time="09:38">Shall I release it now?</ChatBubble>  <ChatBubble direction="outgoing" time="09:40">Yes please.</ChatBubble></ChatLog>

API reference

ChatBubble

Prop	Type	Default	Description
`direction`	`"incoming" \| "outgoing"`	`"incoming"`	Figma's Direction: incoming at the start, outgoing at the end.
`avatar`	`ReactNode`	None	An md Avatar.
`name`	`ReactNode`	None	Figma's Show name.
`time / dateTime`	`ReactNode / string`	None	Figma's Show timestamp: the shown time and its machine value.
`reactions`	`ReactNode`	None	Figma's Show reaction: a `MessageReactions` row.
`status`	`ReactNode`	None	A message status under an outgoing bubble.

MessageReaction

Prop	Type	Default	Description
`emoji`	`string`	None	The emoji.
`count`	`number`	None	Figma's Show count.
`mine`	`boolean`	`false`	Figma's My reaction: `aria-pressed`.
`label`	`string`	None	The reaction's name for screen readers.

TypingIndicator

Prop	Type	Default	Description
`label`	`string`	None	Announced: Omar is typing.
`avatar`	`ReactNode`	None	The typist's avatar.

ChatLog

Prop	Type	Default	Description
`aria-label`	`string`	None	Names the conversation.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves to the reaction buttons; Enter or Space toggles yours.

ARIA

The conversation is an ordered list inside a role="log" region, so new messages are announced politely.
The typing indicator is a role="status" with text such as Omar is typing.
A reaction is a toggle button with aria-pressed.

Arabic and RTL notes

Mirrors

Incoming messages sit on the right in Arabic and outgoing ones on the left.
The square corner follows the avatar.

Does not mirror

Emoji and times stay as they are.

Numerals: Times and counts appear as the app passes them.
Arabic typography: Text body-16, name label-14 Medium, time numeric-12.
Mixed-direction text: Message text is dir="auto", so an English message in an Arabic chat reads correctly.