A scrollable container for chat transcripts that auto-scrolls to new messages, anchors conversation turns in view, and shows a jump-to-latest button when the reader scrolls away from the live edge.
"use client";
import {
MessageScroller,
MessageScrollerButton,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerProvider,
MessageScrollerViewport,
} from "@/components/ui/message-scroller";
const messages = [
{ id: "1", role: "assistant", text: "Hi! How can I help you today?" },
{
id: "2",
role: "user",
text: "Can you explain how MessageScroller keeps the viewport pinned to the bottom while streaming?",
},
{
id: "3",
role: "assistant",
text: "Sure — it only auto-scrolls while you're already at the bottom. Scroll up to read older messages and it backs off automatically.",
},
{
id: "4",
role: "user",
text: "That sounds exactly like the behaviour I need for a chat app.",
},
{
id: "5",
role: "assistant",
text: "Wrap your list in MessageScroller, put messages inside MessageScrollerContent, and add MessageScrollerButton for a jump-to-latest control.",
},
{ id: "6", role: "user", text: "Got it, thanks!" },
];
export default function MessageScrollerDemo() {
return (
<MessageScrollerProvider autoScroll>
<MessageScroller className="mx-auto h-96 w-full max-w-sm rounded-lg border bg-background">
<MessageScrollerViewport className="px-4">
<MessageScrollerContent className="py-4">
{messages.map((message) => (
<MessageScrollerItem key={message.id}>
<div
className={
message.role === "user"
? "ml-auto max-w-[80%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground"
: "mr-auto max-w-[80%] rounded-lg bg-muted px-3 py-2 text-sm text-foreground"
}
>
{message.text}
</div>
</MessageScrollerItem>
))}
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton />
</MessageScroller>
</MessageScrollerProvider>
);
}
Part of uiable — browse the full library on 21st.dev.