KQ-841 · BUBBLE/LAND

Bubble Land

A message thread with a composer whose new bubble rises into the list from the composer's side on recoil, the two bounces of something landing. The bubble's delivery mark walks the states the parent reports: a ring while sending, one check drawn on flick once sent, a second check that walks out on snap when delivered, and both tinted cobalt when read; failure shakes the bubble on a tween and offers Retry beneath it. The composer is a textarea where Enter sends and Shift+Enter breaks a line, every mark is an image with a sentence, and a status region speaks delivered, read, and failure once each.

KQ-841 · BUBBLE/LAND

Order 4471 is packed. Hold it at the depot, or send it on?
9:38
Hold it until Friday, please.
9:39

Ines → Marta · read · 0 sent

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/bubble-land

Props

messages: BubbleMessage[]; default —; The thread, oldest first: id, from ("me" or "peer"), text, an optional formatted time, and for own messages a delivery of "sending", "sent", "delivered", "read", or "failed".
peerName: string; default "Them"; The other person; the mark's sentences name them ("Read by Marta").
onSend: (text: string) => void; default —; Fires from Enter or the Send control with the trimmed draft; append the message here with delivery "sending".
onRetry: (id: string) => void; default —; Fires from a failed bubble's Retry control; set that message back to "sending".
placeholder: string; default "Message"; Composer placeholder.
disabled: boolean; default false; Holds the composer while the parent is busy.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
messages	BubbleMessage[]	—	The thread, oldest first: id, from ("me" or "peer"), text, an optional formatted time, and for own messages a delivery of "sending", "sent", "delivered", "read", or "failed".
peerName	string	"Them"	The other person; the mark's sentences name them ("Read by Marta").
onSend	(text: string) => void	—	Fires from Enter or the Send control with the trimmed draft; append the message here with delivery "sending".
onRetry	(id: string) => void	—	Fires from a failed bubble's Retry control; set that message back to "sending".
placeholder	string	"Message"	Composer placeholder.
disabled	boolean	false	Holds the composer while the parent is busy.
label	string	—	Names the thread list for assistive technology.