LINE-Style Chat Bubbles

The chat UI Taiwanese users know best — green and white bubbles, read receipts, stickers, and date dividers.

The chat visual vocabulary most familiar to users in Taiwan: green bubbles on the right, white bubbles on the left (adapting to dark mode automatically), a timestamp and a small 「已讀」 (read) note on each message, large sticker messages, centered date dividers, and a "typing…" animated bubble — with new messages popping in one by one as they mount. It borrows only the generic visual vocabulary and contains no brand marks or names.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/line-chat-bubbles.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Typing bubbletyping

Typing avatartypingAvatar

Auto-scroll to the bottomautoScroll

<LineChatBubbles />

Installation

npx shadcn@latest add "https://webberui.com/r/line-chat-bubbles.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/line-chat-bubbles.

Usage

import {
  LineChatBubbles,
  type LineChatMessage,
} from "@/components/ui/line-chat-bubbles";

const messages: LineChatMessage[] = [
  { divider: "Today" },
  {
    side: "left",
    name: "Ah-Che",
    avatar: "🍱",
    text: "Want to order bento together for lunch?",
    time: "11:42",
  },
  { side: "right", text: "Sure — braised chicken leg rice for me", time: "11:43", read: true },
  { side: "right", sticker: "🧋", time: "11:45", read: true },
];

<LineChatBubbles messages={messages} typing className="h-80" />

For live chat, just append new messages to the messages array — newly mounted bubbles pop in and scroll to the bottom automatically. Set typing to true to show the "typing…" bubble while the other person is typing.

Props

Prop	Type	Default	Description
`messages`	`LineChatMessage[]`	—	The message thread, rendered top to bottom in order
`typing`	`boolean`	`false`	Whether to show the left-side "typing…" animated bubble at the bottom
`typingAvatar`	`string`	—	Avatar emoji beside the typing bubble
`autoScroll`	`boolean`	`true`	Scroll to the bottom automatically when the messages or the typing state change
`className`	`string`	—	Forwarded to the chat container (you can override the height, corner radius, and background color)

LineChatMessage

Field	Type	Description
`side`	`"left" \| "right"`	Message side: `left` is the other person's white bubble, `right` is your own green bubble; defaults to `left`
`text`	`string`	Text content (use either this or `sticker`; `sticker` wins)
`sticker`	`string`	Sticker message: pass an emoji, rendered in the large sticker style
`time`	`string`	Message time string, for example `"11:42"`, formatted by the caller
`read`	`boolean`	Show the small 「已讀」 (read) note — by convention on your own messages on the right
`name`	`string`	Sender name for left-side messages, shown above the bubble
`avatar`	`string`	Avatar emoji for left-side messages
`divider`	`string`	Date divider tag: when set, this entry renders only a centered date and every other field is ignored

Accessibility

The message container uses role="log", so assistive technology treats newly added messages as live content to announce
The 「已讀」 note and the timestamps are visible text and are read directly; the typing bubble carries an sr-only note saying 「對方輸入中」 (the other person is typing), and sticker emoji carry an aria-label
When the user has "reduce motion" enabled at the system level, the pop-in animation and the three bouncing dots of "typing…" are disabled, and auto-scroll jumps into position instead of scrolling smoothly