Glin UI
Radix UIBase UI
Primitive / Moleculebeta

Message

Chat turn layout with roles, avatar, bubble content and an actions toolbar (copy, regenerate, feedback).

Edit on GitHub

Q3 revenue review

Glin assistant, 3 sources

Online
MK
Summarize how Q3 went compared with Q2.
q3-revenue.csv47 KB
board-notes.pdf1.1 MB
G
Revenue grew 12% quarter over quarter, driven mostly by the Pro plan. Churn stayed flat at 1.8%, so the gain came from expansion rather than new logos.
MK
Which regions grew fastest?
G
Europe led with 19% growth, followed by North America at 11%. APAC was flat after the pricing change in August.
G
Thinking...

Installation

Install from
pnpm dlx @glinui/cli@latest add message

Prefer the package?

Usage

Variants

Every vocabulary variant on the default tone. Omit variant to follow the ambient design style.

glinr bubble
solid bubble
plain bubble
soft bubble
outline bubble
ghost bubble
gradient bubble
import { Message, MessageContent } from "@glinui/ui"



export function MessageVariantsDemo() {
  return (
    <div className="grid gap-2 md:grid-cols-2">
      <Message variant="glinr"><MessageContent>glinr bubble</MessageContent></Message>
      <Message variant="solid"><MessageContent>solid bubble</MessageContent></Message>
      <Message variant="plain"><MessageContent>plain bubble</MessageContent></Message>
      <Message variant="soft"><MessageContent>soft bubble</MessageContent></Message>
      <Message variant="outline"><MessageContent>outline bubble</MessageContent></Message>
      <Message variant="ghost"><MessageContent>ghost bubble</MessageContent></Message>
      <Message variant="gradient"><MessageContent>gradient bubble</MessageContent></Message>
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it. Switch the preview stage to Vivid or Photo to see the frosted surface.

G
First line
Second line, grouped
import { Message, MessageAvatar, MessageContent } from "@glinui/ui"



export function Demo() {
  return (
    <div className="w-full max-w-lg">
      <Message variant="glass"><MessageAvatar fallback="G" /><MessageContent>First line</MessageContent></Message>
      <Message variant="glass" grouped><MessageAvatar fallback="G" /><MessageContent>Second line, grouped</MessageContent></Message>
    </div>
  )
}

Accessibility

  • Pure presentation: roles are conveyed through layout, so place messages inside MessageScroller (role="log").
  • Action buttons always have an aria-label; toggles expose aria-pressed.
  • Copy confirmation is announced through a polite status region.
  • Layout uses logical properties, so it mirrors correctly in RTL.

Keyboard Interactions

KeyAction
TabMove through the actions toolbar buttons.
Enter / SpaceActivate the focused action.

ARIA Attributes

  • `role="toolbar"` with `aria-label="Message actions"`
  • `aria-pressed` on toggle actions
  • `role="status"` copy confirmation

Reduced Motion

Only opacity and color transitions are used, and they are disabled under reduced motion.

Affected properties

opacitybackground-color

API Reference

Message

PropTypeRequiredDefaultDescription
role"user" | "assistant" | "system"-assistantSender. User messages align to the end with the accent bubble, system messages render as a centered pill.
variant"glinr" | "solid" | "plain" | "soft" | "outline" | "ghost" | "gradient" | "glass"-ambient (glinr)Surface variant. Omit to follow the ambient design style (glinr by default, plain for minimal, glass for glass).
groupedboolean-falseConsecutive message from the same sender: tight spacing, hidden avatar, squared corners.
labelstringYes"Copy message"Accessible name, also used as the native tooltip.
pressedbooleanNo-Toggle state for stateful actions such as thumbs up.

MessageContent

PropTypeRequiredDefaultDescription
bareboolean-falseRender prose without a bubble.
actionsReactNode--Slot under the bubble, usually MessageActions.
variant / tailBubbleProps--Override the bubble derived from the role.
labelstringYes"Copy message"Accessible name, also used as the native tooltip.
pressedbooleanNo-Toggle state for stateful actions such as thumbs up.

MessageAction / MessageCopyAction

PropTypeRequiredDefaultDescription
labelstringYes"Copy message"Required accessible name and tooltip (MessageAction).
pressedbooleanNo-Sets aria-pressed for toggles such as thumbs up.
valuestring--Text written to the clipboard (MessageCopyAction).
onCopy(value: string) => void--Fires after a successful copy.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Message } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui@phosphor-icons/react

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/message.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

MessageProps

MessageActionProps

PropTypeRequiredDefaultDescription
labelstringYes"Copy message"Accessible name, also used as the native tooltip.
pressedbooleanNo-Toggle state for stateful actions such as thumbs up.

MessageAvatarProps

No explicit fields extracted for this props type.

MessageContentProps

PropTypeRequiredDefaultDescription
actionsReact.ReactNodeNo-Rendered under the bubble, typically `MessageActions`.
barebooleanNofalseRender children without a bubble (plain assistant prose).

MessageCopyActionProps

PropTypeRequiredDefaultDescription
labelstringNo"Copy message"-
onCopy(value: string) => voidNo--
pressedbooleanNo-Toggle state for stateful actions such as thumbs up.
resetAfternumberNo1500How long the success state shows, in ms.
valuestringYes--

MessageProps

PropTypeRequiredDefaultDescription
groupedbooleanNofalseStacked message from the same sender: tighter spacing and corners.
roleMessageRoleNo"assistant"-
variantBubbleVariantNo-Surface treatment passed down to the assistant bubble. Omit for the ambient design style (glinr by default). Vocabulary: glinr, solid, plain, soft, outline, ghost, gradient, glass. User messages stay solid accent unless a bubble sets its own variant.