Message Scroller

Manages scroll position and visibility for a scrolling list of chat messages.

$bunx shadcn@latest add @nx-ui/message-scroller
Registry item
Installs withbuttonutils

Basic conversation

Provider, Root, Viewport, Content and Item compose a scrolling thread inside a fixed-height frame. A 'scroll to end' button fades in once you scroll away from the bottom.

Morning — soil samples from the Elmridge allotment are back from the lab.
pH is 6.4, organic matter is up 2% since spring. Good news for the compost trial.
Brilliant. Can you post the full report to the Elmridge project folder?
Already uploaded. I've also flagged plot 4 — nitrogen is a little low.
Noted. Let's add a green manure crop there before the fig trees go in.
Compost delivery for Thornbury is confirmed for Thursday, 12 tonnes.
Perfect — that lines up with the volunteer session on Saturday.
I'll ask the haulier to drop it by the north gate rather than blocking the drive.
One more thing — the waste audit for Riverside Grove is due Friday. I'll start the draft tonight.
Thanks Priya, appreciated. Ping the movement list once it's ready for review.

Scroll buttons

MessageScrollerButton accepts direction='start' or 'end' and forwards Button's variant/size props. Both can be mounted at once for a long, bidirectionally scrollable thread.

Morning — soil samples from the Elmridge allotment are back from the lab.
pH is 6.4, organic matter is up 2% since spring. Good news for the compost trial.
Brilliant. Can you post the full report to the Elmridge project folder?
Already uploaded. I've also flagged plot 4 — nitrogen is a little low.
Noted. Let's add a green manure crop there before the fig trees go in.
Compost delivery for Thornbury is confirmed for Thursday, 12 tonnes.
Perfect — that lines up with the volunteer session on Saturday.
I'll ask the haulier to drop it by the north gate rather than blocking the drive.
One more thing — the waste audit for Riverside Grove is due Friday. I'll start the draft tonight.
Thanks Priya, appreciated. Ping the movement list once it's ready for review.

Programmatic scrolling

useMessageScroller() exposes scrollToStart, scrollToEnd and scrollToMessage for building a jump-to-message toolbar outside the scroller markup.

Riverside Grove — waste audit thread
Morning — soil samples from the Elmridge allotment are back from the lab.
pH is 6.4, organic matter is up 2% since spring. Good news for the compost trial.
Brilliant. Can you post the full report to the Elmridge project folder?
Already uploaded. I've also flagged plot 4 — nitrogen is a little low.
Noted. Let's add a green manure crop there before the fig trees go in.
Compost delivery for Thornbury is confirmed for Thursday, 12 tonnes.
Perfect — that lines up with the volunteer session on Saturday.
I'll ask the haulier to drop it by the north gate rather than blocking the drive.
One more thing — the waste audit for Riverside Grove is due Friday. I'll start the draft tonight.
Thanks Priya, appreciated. Ping the movement list once it's ready for review.

Button sizes

Pass size (and variant) through to restyle the floating scroll button — icon-xs through icon-lg all line up on the frame edge.

Priya
Priya
You
Priya
You
Dev
icon-xs
Priya
Priya
You
Priya
You
Dev
icon-sm
Priya
Priya
You
Priya
You
Dev
icon
Priya
Priya
You
Priya
You
Dev
icon-lg

Composed chat panel

Header, message-scroller thread and composer combined into a realistic Nexus project conversation, complete with avatars and a delivery receipt.

PN
Elmridge AllotmentPriya, Dev and 3 others
PR
Morning — soil samples from the Elmridge allotment are back from the lab.
PR
pH is 6.4, organic matter is up 2% since spring. Good news for the compost trial.
Brilliant. Can you post the full report to the Elmridge project folder?
PR
Already uploaded. I've also flagged plot 4 — nitrogen is a little low.
Noted. Let's add a green manure crop there before the fig trees go in.
DE
Compost delivery for Thornbury is confirmed for Thursday, 12 tonnes.
Perfect — that lines up with the volunteer session on Saturday.
DE
I'll ask the haulier to drop it by the north gate rather than blocking the drive.
PR
One more thing — the waste audit for Riverside Grove is due Friday. I'll start the draft tonight.
Thanks Priya, appreciated. Ping the movement list once it's ready for review.
Just now

API reference

Exported parts and their props, extracted from the component source.