Message Scroller
Auto-scrolling container for chat message lists with jump-to controls.
Installation
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/message-scroller.jsonUsage
Use for conversation threads that stay pinned to the latest message and offer a control to jump
back. Built on @shadcn/react/message-scroller.
Viewport uses scroll-fade-b from the scroll-fade utility.
import {
MessageScroller,
MessageScrollerButton,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerProvider,
MessageScrollerViewport,
} from "@/components/message-scroller/message-scroller";
export function Example({
messages,
}: {
messages: { id: string; text: string }[];
}) {
return (
<MessageScrollerProvider>
<MessageScroller className="h-96">
<MessageScrollerViewport>
<MessageScrollerContent>
{messages.map((message, index) => (
<MessageScrollerItem
key={message.id}
scrollAnchor={index === messages.length - 1}
>
{message.text}
</MessageScrollerItem>
))}
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton />
</MessageScroller>
</MessageScrollerProvider>
);
}Mark the latest row with scrollAnchor so new content sticks to the end. Use hooks
useMessageScroller, useMessageScrollerScrollable, and useMessageScrollerVisibility for custom
controls.