Message Scroller

A compact conversation minimap that navigates user turns while keeping the full thread visible.

Open the component catalog.

The catalog is open. Which patterns should I show?

Show only the AI-native patterns.

Done. I found nine AI-native components.

Group the sidebar into clear sections.

I grouped them by conversation, input, and output.

Make the navigation more compact.

The spacing and labels are now tighter.

Update the prompt input styling.

Updated to match the rest of the catalog.

Use the same radius across every card.

All cards now share the same radius.

Remove the extra metadata chips.

Removed. The output reads more cleanly now.

Add a subtle shadow to the output.

Added a low-contrast shadow.

Turn the message scroller into a conversation minimap.

Installation

Add the component source directly to your project.

pnpm dlx shadcn@latest add https://pastaui.com/r/message-scroller.json

Message Scroller properties
Prop	Type	Default	Description
`messages`	`MessageScrollerMessage[]`	—	Provides the full thread; user turns are represented by minimap strips.
`activeId`	`string`	—	Highlights the message currently visible in the conversation.
`onMessageSelect`	`(message) => void`	—	Runs after a strip scrolls its matching message into view.