---
title: Message Scroller
description: Anchors conversation turns, follows streamed replies, restores threads, preserves prepended history, and jumps to messages.
icon: list-restart
author:
  name: shadcn
  url: https://github.com/shadcn
sidebar:
  badge: New
---

<ComponentPreview name="message-scroller-demo" bigScreen />

<PoweredBy packages={[
  { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/base/message-scroller' },
  { name: '@shadcn/react', url: 'https://ui.shadcn.com/docs/components/message-scroller' },
]} />

## Installation

```package-install
npx shadcn@latest add @redpanda/message-scroller
```

## Usage

`MessageScroller` owns conversation scroll behavior without owning messages, AI state, transport, persistence, or model state.

```tsx
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/redpanda-ui/components/message-scroller"
```

```tsx
<MessageScrollerProvider autoScroll defaultScrollPosition="end">
  <MessageScroller>
    <MessageScrollerViewport>
      <MessageScrollerContent>
        {messages.map((message) => (
          <MessageScrollerItem
            key={message.id}
            messageId={message.id}
            scrollAnchor={message.startsTurn}
          >
            <Message>{/* message content */}</Message>
          </MessageScrollerItem>
        ))}
      </MessageScrollerContent>
    </MessageScrollerViewport>
    <MessageScrollerButton />
  </MessageScroller>
</MessageScrollerProvider>
```

## Anatomy

```text
MessageScrollerProvider
└── MessageScroller
    ├── MessageScrollerViewport
    │   └── MessageScrollerContent
    │       └── MessageScrollerItem…
    └── MessageScrollerButton
```

## Behavior

- Anchors a new turn near the start of the viewport while preserving prior context.
- Follows streamed content only while the reader remains at the live edge.
- Stops following after scroll, touch, keyboard, or selection intent.
- Preserves position when earlier history is prepended.
- Supports start, end, and last-anchor restoration.
- Exposes commands and visibility state through `useMessageScroller`, `useMessageScrollerScrollable`, and `useMessageScrollerVisibility`.

Give every `MessageScrollerItem` a stable `messageId` when using jump or visibility APIs. Mark only the first item in a turn with `scrollAnchor`.

## Scroll fade

The registry theme includes the full `scroll-fade` utility family for block, inline, and individual edges, including configurable fade sizes and reduced browser fallbacks. `MessageScrollerViewport` uses a bottom-edge fade by default.

## Accessibility

The viewport defaults to a focusable `region` named “Messages”. Content defaults to a live `log` with `aria-relevant="additions"`. Override labels when multiple conversations appear on one page.

## Credits

- Styled wrapper based on [Shadcn UI Message Scroller](https://ui.shadcn.com/docs/components/base/message-scroller).
- Scroll behavior provided by the MIT-licensed [`@shadcn/react`](https://www.npmjs.com/package/@shadcn/react) package.