shadcn.io is not affiliated with official shadcn/ui
Shadcn Message Scroller for React
Chat scroll container that anchors turns, follows streamed replies, and jumps to any message.
Group Chat
A group chat with several participants and an assistant. The Marker is marked as a turn.
@mary, the astrophage line keeps matching Venus energy output. Can you check my math?
Mary (Agent)
Yes. Confirmed. The curve points to a microorganism harvesting stellar energy and breeding near carbon dioxide. If @rocky agrees, this is the clue we need.
ping @rocky
This will create a marker and make it the anchor
When a user joins, a marker is created. scrollAnchor on the marker marks it as the next turn
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/message-scroller.jsonnpx shadcn@latest add https://kit.dev/r/base/message-scroller.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/message-scroller.jsonyarn shadcn@latest add https://kit.dev/r/base/message-scroller.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add @shadcn/react lucide-reactnpm install @shadcn/react lucide-reactpnpm add @shadcn/react lucide-reactyarn add @shadcn/react lucide-reactCopy and paste the following code into your project.
"use client";
import { MessageScroller as MessageScrollerPrimitive } from "@shadcn/react/message-scroller";
import { ArrowDownIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/base/components/button";
function MessageScrollerProvider(
props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>
) {
return <MessageScrollerPrimitive.Provider {...props} />;
}
function MessageScroller({
className,
...props
}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {Update the import paths to match your project setup.
Anatomy
MessageScrollerProvider
└── MessageScroller
├── MessageScrollerViewport
│ └── MessageScrollerContent
│ └── MessageScrollerItem
└── MessageScrollerButtonUsage
import {
MessageScroller,
MessageScrollerButton,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerProvider,
MessageScrollerViewport,
} from "@/components/ui/message-scroller";<MessageScrollerProvider>
<MessageScroller className="max-w-full min-w-0">
<MessageScrollerViewport>
<MessageScrollerContent>
<MessageScrollerItem messageId="1" scrollAnchor>
{/* message */}
</MessageScrollerItem>
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton />
</MessageScroller>
</MessageScrollerProvider>