UI Skillbook
2

Message Scroller

The scroll region of a chat thread: opens at the latest message, follows streaming replies and offers a jump back.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-message-scroller and follow the Siteplane Message Scroller skill it prints for this task.

Paste this into your agent.

Message Scroller holds the turns of a chat or AI conversation, keeps a new turn in view, follows a reply as it streams and keeps position when older messages load above. It also acts as a log so screen readers hear new rows.

Install

bashnpx shadcn@4.18.0 add @siteplane/message-scroller

Import it from @/siteplane/components/message-scroller. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Message: Use Message inside each row to lay out a single turn.
  • vs Marker: Use Marker rows between turns for dates, notes and a thinking status.
  • vs Prompt Input: Place Prompt Input below the scroller as the composer.

Rules

  • Make every row a MessageScrollerItem directly inside MessageScrollerContent, with a stable messageId that also serves as the React key.
  • Mark the first row of each turn with scrollAnchor; that is normally the user's own message.
  • Turn on autoScroll to follow a growing reply, and set busy on MessageScrollerContent while a reply is pending.
  • Add MessageScrollerButton for the jump-to-latest control and use useMessageScroller() for custom jumps.
  • Load long histories in pages above the first row; the scroller does not virtualise rows.

Reference

  • Message Scroller docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Chat & AI. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-message-scroller

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Build Primitiveby PrototyperAI

Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.

AccessibilityExternalGitHub stars: 7

Sounds on the Webby raphaelsalaja

Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.

InteractionExternalGitHub stars: 42

Accessibilityby addyosmani

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

AccessibilityExternalGitHub stars: 3K

Accessibility Diffby AccessLint

Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI