Message Scroller

Conversation

Keeps a conversation near its latest content while allowing readers to scroll back without being pulled down.

React · copy into your project · light and dark themes

Try it

A place to gather ideas.

Cojeev · note 1

Follow the thread that feels useful.

You · note 2

Small steps are still steps.

Cojeev · note 3

Let’s make a little room to think.

You · note 4

Scroll up before adding a message to try the “jump to latest” control.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/message-scroller.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, message, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/message-scroller.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/message.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using message scroller

Place messages inside MessageScroller and add MessageScrollerJump to offer a return to the latest content.
Use followThreshold and onAtBottomChange to coordinate a nearby new-message indicator.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

MessageScrollerProps

Prop	Type	Required
`followThreshold`	`number`	No
`onAtBottomChange`	`(atBottom: boolean) => void`	No
`scrollbarType` Auto shows the custom rail only when content actually overflows.	`React.ComponentProps<typeof ScrollArea>["type"]`	No

MessageScrollerJumpProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

Choose a suitable accessible label and announcement strategy for the conversation; the scroller does not create a live region automatically.
Provide a keyboard-reachable scrolling region when its content has no focusable elements.

States and appearance

resthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.