Glin UI
Radix UIBase UI
Primitive / Organismbeta

Message Scroller

Conversation log that sticks to the bottom, shows a jump to latest pill and announces new messages politely.

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

Prefer the package?

Usage

MessageScroller keeps the log pinned to the newest turn and shows a jump pill when you scroll up.

Accessibility

  • Scroll container is role="log" with aria-live="polite" so new messages are announced without interrupting.
  • The container is focusable so keyboard users can scroll with arrow keys, Page Up and Page Down.
  • Autoscroll only follows while the reader is at the bottom, never yanking them away from history.
  • The jump pill is removed from the tab order and accessibility tree while hidden.

Keyboard Interactions

KeyAction
Arrow Up / DownScroll the focused log.
Page Up / Page DownScroll by a page.
Tab then EnterActivate Jump to latest when visible.

ARIA Attributes

  • `role="log"`
  • `aria-live="polite"`
  • `aria-relevant="additions"`
  • `aria-hidden` on the hidden jump pill

Reduced Motion

Smooth scrolling is replaced with an instant jump and the pill transition is disabled.

Affected properties

scroll-behavioropacitytransform

API Reference

PropTypeRequiredDefaultDescription
thresholdnumberNo80Pixels from the bottom that still count as pinned.
jumpLabelstringNo"Jump to latest"Text of the pill shown when scrolled up.
labelstringNo"Conversation"Accessible name of the log region.
onAtBottomChange(atBottom: boolean) => voidNo-Fires when the reader leaves or returns to the bottom.

Source

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

Import

import { MessageScroller } 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-scroller.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

MessageScrollerProps

MessageScrollerProps

PropTypeRequiredDefaultDescription
jumpLabelstringNo"Jump to latest"Label of the jump pill.
labelstringNo"Conversation"Accessible name of the log region.
onAtBottomChange(atBottom: boolean) => voidNo-Fires when the stuck-to-bottom state flips.
thresholdnumberNo80Distance in px from the bottom that still counts as "at the bottom".