@shadcn: What Makes a Great Streaming Chat Experience Start here: Never move the reader against their intent. 1. Move only when…
shadcn
@shadcn
What Makes a Great Streaming Chat Experience
Start here: Never move the reader against their intent.
1. Move only when the reader asked to move.
If someone is reading, don’t pull them somewhere else. Auto-scroll should never be the default.
2. Follow only while they’re following.
If they’re at the live edge, keep the stream in view. If they scroll away, leave them there.
3. Every interaction is intent.
Scrolling is not the only signal. Selecting text, using the keyboard, opening a link, searching should all stop the interface from moving.
4. Start a new turn near the top of the viewport.
This gives the new turn somewhere it can be read from the beginning.
5. Then stream in the answer.
The streaming answer can then grow into the available space.
6. Keep part of the previous conversation in context.
Enough of the previous turn should remain visible so the reader knows where they are. Context.
7. Let new content arrive offscreen.
The conversation can keep streaming without changing what the reader is looking at.
8. Show what’s happening out of view.
Make it clear when a response is still streaming or when new messages have arrived.
9. Make it easy to return to the latest reply.
A "Jump to latest" action should bring the reader back and resume following.
10. Let people jump anywhere in the conversation.
Long threads need message links, search, unread markers, and direct navigation.
11. Reopen where the reader left off.
A saved conversation should open at the last meaningful turn. This is usually the last user message. Not the absolute bottom.
12. Keep the reader’s place when layout changes.
Images load. Markdown expands. Code blocks render. Older messages appear above. None of that should make the reader lose their place.
13. Handle interruptions without stealing position.
Stopping, retrying, regenerating, branching, or errors should not unexpectedly move the conversation.
14. Stay responsive in long threads.
Streaming text, markdown, code, images, and long history should still feel responsive.
15. Be accessible without the noise.
Keep the transcript navigable, preserve keyboard focus, and announce important events at a comfortable pace.
It’s all about the scroll. Scroll Engineering.
💬 59 · 🔁 124 · ❤️ 2.4K · 👁 176.9K
1:33 PM · Jun 26, 2026 · View on X
Replies (12)
zaf malafouris @zafeirism
These almost feel obvious, yet I wouldn’t manage to come up with them myself. Great tips!
Fabio @withLorapop
Scroll behaviour is definitely neglected by designers and needs more attention
Ozar @ozarliquid
the auto-scroll default always feels like someone grabbing ur book and turning the page for u
control belongs to the reader
Kevin Courbet @LonePasserby
Disagree with 4. I want to preserve the context of the previous reply. When apps do this, I find myself having to manually scroll up. I still think auto scroll is the best UX when done right (responsive to user intent)
Ben Freed @ivebenfreed
This is insanely hard but has now become my spec
Jason @JasonBoy7
Great tips, so what's the best library to do all of these out of the box?
Petyo Ivanov @petyosi
Renaming myself to junior scroll engineer
Cire Jr @cirejr_
I understand all of these, because I have been many times frustrated about them 😒. So yeah coding agents, and chatbot should definitely read and implement these.
Caleb Panza ☾ @CalebPanza
you had me at "auto scroll should never be the default"
shadcn @shadcn
Today we're releasing a new set of components for building chat interfaces.
We've taken the patterns we build every day, rethought the abstractions behind them, and turned them into components you can compose and customize.
We're starting with the conversation layer: streaming,
▶
shadcn @shadcn
Launch day. New components.
shadcn @shadcn
"Slack is close to being the perfect UI for most apps."
https://x.com/shadcn/status/1983388295259189590…
Comments (0)
No comments yet