Message Scroller Scrollable Demo for React Base UI

Scroll Status

Where the reader can go scroll to based on current scroll position.

Review scroll checkpoint 1.

Checkpoint 2 is synced. The scrollable hook updates as the viewport moves. When the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available. At the latest message, the footer should switch again and only point them back up.

Review scroll checkpoint 3.

Checkpoint 4 is synced. The scrollable hook updates as the viewport moves. When the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available. At the latest message, the footer should switch again and only point them back up.

Review scroll checkpoint 5.

Checkpoint 6 is synced. The scrollable hook updates as the viewport moves. When the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available. At the latest message, the footer should switch again and only point them back up.

Review scroll checkpoint 7.

Checkpoint 8 is synced. The scrollable hook updates as the viewport moves. When the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available. At the latest message, the footer should switch again and only point them back up.

Review scroll checkpoint 9.

Checkpoint 10 is synced. The scrollable hook updates as the viewport moves. When the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available. At the latest message, the footer should switch again and only point them back up.

Review scroll checkpoint 11.

Checkpoint 12 is synced. The scrollable hook updates as the viewport moves. When the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available. At the latest message, the footer should switch again and only point them back up.

All messages fit in the viewport.

Scroll the transcript to see the footer update.

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.