Skip to content
ui.anuragroy.dev

Browse components

← All components

Message Scroller

Conversation viewport that follows streams and holds your place when you scroll away.

Install
npx shadcn@latest add https://ui.anuragroy.dev/r/message-scroller.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/message-scroller.json

GitHub fallback if the website is down:

Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/message-scroller.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/message-scroller.

Import
import {  MessageScroller,  MessageScrollerButton,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport} from "@/components/ui/message-scroller"
example.tsx
import {  MessageScroller,  MessageScrollerButton,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport,} from "@/components/ui/message-scroller"export function Example() {  return (    <MessageScrollerProvider>      <MessageScroller className="h-96">        <MessageScrollerViewport>          <MessageScrollerContent>            <MessageScrollerItem scrollAnchor>User turn</MessageScrollerItem>            <MessageScrollerItem>Assistant reply</MessageScrollerItem>          </MessageScrollerContent>        </MessageScrollerViewport>        <MessageScrollerButton />      </MessageScroller>    </MessageScrollerProvider>  )}

API Reference

MessageScrollerItem

PropTypeDefault
scrollAnchorbooleanfalse
  • scrollAnchor — Pin the live edge to this item (typically the latest user turn).

Notes

  • Built on `@shadcn/react/message-scroller`. Also exports `useMessageScroller`, `useMessageScrollerScrollable`, and `useMessageScrollerVisibility`.
  • The jump-to-end button appears when the reader leaves the live edge.