Message Scroller Opening Position Demo for React Base UI

Opening Position

Choose where a saved transcript opens.

This is the first message the user sent in the conversation.

Workspace creation rose 8%, but first invite completion only rose 2%.

This is the last message the user sent in the conversation.

Start with the invite step. Teams are creating workspaces but waiting to add collaborators.

Recommended follow-up:

1. Compare invite drop-off by account size. 2. Check whether users who skip invites still return within 24 hours. 3. Review the empty-state copy on the first project screen. 4. Segment activation by template, since template users may not need invites right away.

If that pattern holds, the next experiment should make collaboration useful earlier instead of prompting for invites harder.

Toggle the defaultScrollPosition to see where the transcript starts when you open the thread

Get instant access to the code

189 lines of TypeScript, free with an account. Sign in once and every component and demo is yours.

104 components
Every demo
Copy or download
CLI install

Google GitHub

Use email insteadNo credit card

Get your install command

Your install command, free with an account. Sign in once and every component and demo is yours.

104 components
Every demo
Copy or download
CLI install

Google GitHub

Use email insteadNo credit card

Adds components/ui/message-scroller.tsx, with Button, @shadcn/react and lucide-react. Then paste the demo from the Code tab.