Message Scroller
An auto-scrolling viewport for chat messages, with a scroll-to-latest button. Built on @shadcn/react.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Dropped upstream's scroll-fade-b/scrollbar-thin/scrollbar-gutter-stable custom Tailwind utilities (not available in this repo) in favor of plain overflow-y-auto
- Replaced the multi-icon-library IconPlaceholder abstraction with a plain lucide-react ArrowDownIcon
- Replaced physical inset positioning with logical start-1/2
Overview
Scroll up inside the viewport below, then use the button to jump back to the latest message.
Installation
Usage
import {
MessageScroller,
MessageScrollerButton,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerProvider,
MessageScrollerViewport,
} from "@/components/ui/message-scroller"
export function Example() {
return (
<MessageScrollerProvider>
<MessageScroller className="h-56">
<MessageScrollerViewport>
<MessageScrollerContent>
{messages.map((message) => (
<MessageScrollerItem key={message.id}>
{message.text}
</MessageScrollerItem>
))}
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton />
</MessageScroller>
</MessageScrollerProvider>
)
}