Message bubble
One message in a conversation: an SMS/MMS bubble aligned by direction, with media previews, an optimistic dimmed pending state, and a timestamp plus delivery indicator on outbound messages. This is the atomic unit the thread is built from.
Hey — are we still on for 2pm?
Mar 4Yes! Marcus is 15 minutes out.
Mar 4Sending now…
Mar 4Installation
npx shadcn@latest add @handset/message-bubbleInstalls delivery-status as a dependency.
Usage
import { MessageBubble } from "@/components/handset/message-bubble";
{messages.map((m) => (
<MessageBubble key={m.id} message={m} />
))}Pass hideMeta to drop the timestamp/delivery row when you stack several bubbles into a single group (see message-group).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | OutgoingMessage | — | The message to render (the shape returned by useThread). |
| hideMeta | boolean | false | Hide the timestamp + delivery row, for grouping. |
| className | string | — | Merged onto the row wrapper. |