Chat Bubble React component
Chat message bubbles for both sides of a conversation: runs from the same person group together with tight inner corners and one avatar, outgoing messages show sending, delivered and read ticks, reactions pop in under a bubble, and a typing bubble bounces while someone writes.
When to use the Chat Bubble component
Use Chat Bubble for messaging UIs: support chats, in-app messages, comments shown as a conversation, AI chats with a human feel. Set position from how many messages in a row came from the same person so runs read as one block.
Drive status from your delivery events so people can trust when a message has been seen.
Installation
Add the Chat Bubble component to your project with the shadcn CLI. It lands in components/chat-bubble.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/chat-bubble.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ChatBubble /> accepts 11 props, all optional.
| Prop | Type | Default |
|---|---|---|
| side in: from someone else, on the left. out: from you, on the right. | "in" | "out" | "in" |
| children | React.ReactNode | — |
| name Shown above the first bubble of an incoming group. | string | — |
| avatar Avatar image URL, or initials are made from name. Shown beside the last bubble of a group. | string | — |
| time | string | — |
| status Delivery ticks for outgoing messages. | "sending" | "sent" | "delivered" | "read" | — |
| position Where the bubble sits in a run from the same sender; shapes the corners and places the avatar. | "single" | "first" | "middle" | "last" | "single" |
| reactions | { emoji: string; count: number; mine?: boolean }[] | [] |
| onReact | (emoji: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- side
in: from someone else, on the left. out: from you, on the right.
"in" | "out"Default: "in" - childrenReact.ReactNode
- name
Shown above the first bubble of an incoming group.
string - avatar
Avatar image URL, or initials are made from name. Shown beside the last bubble of a group.
string - timestring
- status
Delivery ticks for outgoing messages.
"sending" | "sent" | "delivered" | "read" - position
Where the bubble sits in a run from the same sender; shapes the corners and places the avatar.
"single" | "first" | "middle" | "last"Default: "single" - reactions{ emoji: string; count: number; mine?: boolean }[]Default: []
- onReact(emoji: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How do I group messages?
- Give consecutive messages from one sender position first, middle and last (or single on its own). The inner corners tighten, the name shows once at the top and the avatar once at the bottom.
- What do the ticks mean?
- A spinning arc while sending, one tick when your server has it, two when it reached the other person, and two blue ticks once it's been read.
- Can people react to messages?
- Pass reactions and onReact. Reactions sit under the bubble, show counts, and highlight the ones the current user added.
