iOS Message Bubbles

Simple Bubbles

Grouped Messages

Grouped with All Rounded Corners

Installation

Usage

Single Message Bubble

import { 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" />
    </>
  );
}

Chat Message

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"
    />
  );
}

Components

MessageBubble

The core message bubble component with iOS-style tails.

Props

ChatMessage

A complete message with optional timestamp. Automatically groups multiple messages.

Props

Features

• iOS-Style Design: Authentic iMessage-like appearance with tails
• Message Grouping: Automatically groups consecutive messages
• Sent Message Color: Uses #00bbff (iOS blue) for sent messages
• Timestamps: Optional timestamps for messages
• Theme Support: Works with light and dark modes
• Responsive: Adapts to different screen sizes
• Customizable: Extensive prop options for customization
• Accessible: Proper semantic HTML structure

Examples

Custom Content in Bubble

<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>

Manual Grouping

<MessageBubble message="First message" variant="sent" grouped="first" />
<MessageBubble message="Middle message" variant="sent" grouped="middle" />
<MessageBubble message="Last message" variant="sent" grouped="last" />

Long Messages

<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"
/>

Styling

The component uses specific colors for authentic iOS appearance:

• Sent messages: #00bbff (iOS blue) with black text
• Received messages: #27272a (dark gray) with white text
• Tails: Pseudo-elements create the iconic message tail effect

Customizing Grouped Message Corners

The 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.

Use Cases

• Chat Applications: Build messaging interfaces like WhatsApp, iMessage, or Telegram
• Customer Support: Create support chat widgets
• AI Chatbots: Display conversational AI responses
• Comments Sections: Show threaded discussions
• Notifications: Display message-style notifications
• Onboarding: Create conversation-style tutorials

Notes

• Message bubbles automatically add tails only on the last message of a group
• The grouped prop allows manual control over tail visibility
• Avatars are only shown for received messages by default
• Timestamps can be customized with any string format
• The component is fully responsive and works on mobile devices