Message Scroller

Anchored, auto-following scroll container for chats.

shadcn/uinew-york-v4 · synced Aug 29, 2026

Installation

import {
  MessageScrollerProvider,
  MessageScroller,
  MessageScrollerViewport,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerButton,
  useMessageScroller,
} from "@aspyn-io/kit";

Chat scroller

A scroll container that follows the live edge, anchors each turn while its reply streams, and floats a jump-to-latest button when you scroll away.

How do I theme a chart?

Series colors come from the --as-chart-* tokens, so charts re-skin with the brand and dark mode automatically.

Can I keep a turn pinned while it streams?

Yes — mark the user's turn with scrollAnchor and the scroller holds it at the reading line while the reply streams in below.

And jump back to the latest?

The floating button appears whenever you scroll away from the live edge; it scrolls you back to the newest message.

Notes

Built on the @shadcn/react headless engine: anchored turns, streamed-reply following, prepended-history preservation, jump-to-message, and visibility tracking — all outside React state, so streaming doesn't re-render the list.
Mark each turn boundary (usually the user's message) with scrollAnchor. Give every item a stable messageId to enable scrollToMessage, prepend preservation, and visibility tracking.
Drive it imperatively with useMessageScroller() (scrollToMessage / scrollToEnd / scrollToStart); read useMessageScrollerScrollable() and useMessageScrollerVisibility() for jump buttons and outlines. Pass aria-busy on the content while streaming.
Not virtualized by design. For very large transcripts, let the viewport own scrolling and render rows with TanStack Virtual.