Scroll to bottom

The jump-to-latest pill. Appears once you are a viewport away or when something new lands below, counts what you missed, and sticks to the bottom again when pressed.

Markdown

On this page

Updates land below while the reader is scrolled up.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/scroll-to-bottom.json

Usage

tsx

<Conversation>
  <ConversationContent>{/* messages */}</ConversationContent>
  <ScrollToBottom />
</Conversation>

Place it inside Conversation, after the content. It floats at the bottom center; move it above a docked composer with className="bottom-24".

Props

Prop	Type	Notes
`when`	`"far" \| "away"`	`far` shows past one viewport or when new messages land below. `away` shows as soon as you leave the bottom
`showUnread`	`boolean`	Show the count of new messages. Defaults to true
`visible`	`boolean`	Force it on or off

Accessibility

Its label includes the count: 3 new messages, scroll to latest.
Hidden, it is aria-hidden and out of the tab order.
On touch screens the hit area grows to 44 px.

Motion

Fades in with 4 px of travel over 150 ms and leaves in 110 ms.
Under reduced motion it appears and disappears instantly.