Message Scroller

A scroll container for chat messages with auto scroll and a scroll-to-end button.

shadcn/ui docs
New ChatHow can I help you today?
BF
Deploying to prod real quick.
BF
It's 4:55 PM. On a Friday.
BF
Ship it.
BF
Did the registry build go through?
BF
Yes, one stale route showed up though.
BF
Which one?
BF
The old toast page, still in the sidebar.
BF
Remove it and rebuild.
BF
Done. Lint and tsc are clean.
BF
Charts render fine with recharts 3?
BF
They do. Pushing the fix now.
BF
Perfect, that is exactly what I had in mind.

Installation

The component depends on the @shadcn/react package. Install it first:

pnpm add @shadcn/react
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/message-scroller.json

Usage

import {
  MessageScrollerProvider,
  MessageScroller,
  MessageScrollerViewport,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerButton,
} from '@/components/ui/message-scroller'
<MessageScrollerProvider>
  <MessageScroller>
    <MessageScrollerViewport>
      <MessageScrollerContent>
        {messages.map((message) => (
          <MessageScrollerItem key={message.id} messageId={message.id}>
            <Message>...</Message>
          </MessageScrollerItem>
        ))}
      </MessageScrollerContent>
    </MessageScrollerViewport>
    <MessageScrollerButton />
  </MessageScroller>
</MessageScrollerProvider>

The scroller needs a parent with a fixed height. Use the useMessageScroller hook inside the provider to scroll programmatically (scrollToEnd, scrollToStart, scrollToMessage).

Examples

Default

New ChatHow can I help you today?
BF
Deploying to prod real quick.
BF
It's 4:55 PM. On a Friday.
BF
Ship it.
BF
Did the registry build go through?
BF
Yes, one stale route showed up though.
BF
Which one?
BF
The old toast page, still in the sidebar.
BF
Remove it and rebuild.
BF
Done. Lint and tsc are clean.
BF
Charts render fine with recharts 3?
BF
They do. Pushing the fix now.
BF
Perfect, that is exactly what I had in mind.

Add Messages

New messages are scrolled into view automatically when the viewport is already at the end.

New ChatHow can I help you today?
BF
Hey, are you around?
BF
Yes, what is up?
BF
I need a review on the message scroller.