## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/message-scroller ``` ```bash pnpm dlx shadcn@latest add @dotui/message-scroller ``` ```bash yarn dlx shadcn@latest add @dotui/message-scroller ``` ```bash bun x shadcn@latest add @dotui/message-scroller ``` ## Usage [#usage] ```tsx import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from "@/ui/message-scroller" ``` ```tsx {messages.map((message) => ( {/* message */} ))} ``` ## Anatomy [#anatomy] `MessageScrollerProvider` holds the scroll state — autoscroll follows new content while the reader sits at the bottom edge and lets go the moment they scroll away. `MessageScrollerViewport` is the scrollable area, `MessageScrollerContent` lays the messages out, and each `MessageScrollerItem` renders lazily as it nears the viewport, so long conversations stay cheap. `MessageScrollerButton` appears once the reader leaves the edge and scrolls them back to the newest message. The `useMessageScroller`, `useMessageScrollerScrollable` and `useMessageScrollerVisibility` hooks expose imperative scrolling and scroll state to anything inside the provider. ## Examples [#examples] ## API Reference [#api-reference] ### MessageScrollerProvider [#messagescrollerprovider] ### MessageScroller [#messagescroller] ### MessageScrollerViewport [#messagescrollerviewport] ### MessageScrollerContent [#messagescrollercontent] ### MessageScrollerItem [#messagescrolleritem] ### MessageScrollerButton [#messagescrollerbutton]