iOS Message Bubbles
Beautiful iOS-style message bubbles with authentic iMessage appearance, message grouping, and tail effects.
Beautiful iOS-style message bubbles with authentic iMessage appearance, message grouping, and tail effects.
The core chat unit. iOS-style aesthetics with smart grouping.
npx shadcn@latest add https://bungas.treonstudio.com/r/message-bubble.jsonimport { MessageBubble } from "@/components/ui/message-bubble";
export default function Example() {
return (
<>
<MessageBubble message="Hey there!" variant="received" />
<MessageBubble message="Hi! How are you?" variant="sent" />
</>
);
}import { ChatMessage } from "@/components/ui/message-bubble";
export default function Example() {
return (
<ChatMessage
variant="received"
messages={["Hey!", "How are you doing?", "Long time no see!"]}
timestamp="10:30 AM"
/>
);
}The core message bubble component with iOS-style tails.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | - | The message text to display |
| variant | "sent" | "received" | "received" | Message alignment and styling |
| grouped | "first" | "middle" | "last" | "none" | "none" | Position in grouped messages |
| className | string | undefined | Additional CSS classes |
| children | ReactNode | undefined | Custom content (overrides message) |
A complete message with optional timestamp. Automatically groups multiple messages.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | string[] | - | Array of message texts |
| variant | "sent" | "received" | "received" | Message alignment and styling |
| timestamp | string | undefined | Message timestamp |
| showTimestamp | boolean | true | Whether to show timestamp |
| className | string | undefined | Additional CSS classes |
<MessageBubble variant="received">
<div className="flex items-center gap-2">
<img src="/emoji.png" className="size-6" />
<span>Custom content with emoji!</span>
</div>
</MessageBubble><MessageBubble message="First message" variant="sent" grouped="first" />
<MessageBubble message="Middle message" variant="sent" grouped="middle" />
<MessageBubble message="Last message" variant="sent" grouped="last" /><MessageBubble
message="This is a really long message that will automatically wrap to multiple lines while maintaining the iOS-style bubble appearance with proper padding and borders."
variant="received"
/>The component uses specific colors for authentic iOS appearance:
#00bbff (iOS blue) with black text#27272a (dark gray) with white textThe default CSS uses variant-specific corner radii. You can customize the grouping style:
Tight Corners (Single Side):
.imessage-grouped-first {
border-radius: 20px 20px 20px 5px !important;
}
.imessage-grouped-last {
border-radius: 5px 20px 20px 20px !important;
}
.imessage-grouped-middle {
border-radius: 5px 20px 20px 5px !important;
}All Rounded Corners:
.imessage-grouped-first {
border-radius: 20px 20px 20px 20px !important;
}
.imessage-grouped-last {
border-radius: 20px 20px 20px 20px !important;
}
.imessage-grouped-middle {
border-radius: 20px 20px 20px 20px !important;
}You can wrap groups in a div with a custom class to apply specific corner styles per group.
grouped prop allows manual control over tail visibility