# Message Scroller

Use the MessageScroller behavior directly from the @shadcn/react package with your own markup and styles.

## When to use

* Get the chat scroll behavior with your own markup and styles.
* Build a chat thread that does not use the styled component.

## How it works

`@shadcn/react/message-scroller` is the unstyled behavior behind the styled [Message Scroller](/components/message-scroller) component. It exports a namespace object, `MessageScroller`, whose parts (`Provider`, `Root`, `Viewport`, `Content`, `Item`, `Button`) work like the styled ones. For a live demo, see the styled component.

## Example

```tsx
import {
  MessageScroller,
  useMessageScroller,
} from "@shadcn/react/message-scroller"
```

```tsx
<MessageScroller.Provider>
  <MessageScroller.Root>
    <MessageScroller.Viewport>
      <MessageScroller.Content>
        {messages.map((message) => (
          <MessageScroller.Item
            key={message.id}
            messageId={message.id}
            scrollAnchor={message.role === "user"}
          >
            {/* your message UI */}
          </MessageScroller.Item>
        ))}
      </MessageScroller.Content>
    </MessageScroller.Viewport>
    <MessageScroller.Button />
  </MessageScroller.Root>
</MessageScroller.Provider>
```

## Installation

```bash
npm install @shadcn/react
```

## Reference

Official page: https://ui.shadcn.com/docs/react/message-scroller