Shadcn/UI has Released New Components that are More AI-friendly

Recently, shadcn/ui released a set of new components specifically for building AI chat interfaces, including Message Scroller, Message, Attachment, and more.

As we know, shadcn/ui is arguably the top dog in the Web frontend component library space, with deep ties to React. Besides offering great style flexibility for "building pages from scratch," if you invoke AI using its name, it’s also the standard opening move for vibe coding these days.

Its base component library is already good enough. Its belated foray into the AI Chat domain must have its reasons.

In the official docs, the shadcn team summarized a set of "AI Chat Interface Design Principles," some of which I find quite on point—common design wisdom that’s often overlooked (you can check your own AI products to see if this holds true):

1. Never force auto-scroll by default

This one is straightforward. Only when the user actively scrolls to the very bottom edge should the page automatically follow the AI’s output speed. If the user wants to scroll up to read earlier content, select text, or perform a global search, the system must immediately lock the position, regardless of whether the AI is still generating text.

2. New turns should start near the top of the viewport

In many clunky chat apps, when you ask a new question in a conversation, the moment you hit the "Send" button, your question gets pushed to the very bottom of the screen. Then, either it scrolls down with the AI’s output, or it gets stuck there, forcing you to manually scroll down to see new content—otherwise, you see nothing.

This is obviously a poor experience. The starting point of a new turn (after the user sends a new question) should be automatically positioned near the top of the screen, leaving enough room for the upcoming lengthy answer to scroll down (so you can see the initial content of the new reply without moving), while also showing a small portion of the previous turn’s tail (so you know where the current context is).

3. Allow content to silently load off-screen

This relates to point 1. As long as the user hasn’t actively tracked the latest line, the AI’s unfinished output should load off-screen without forcibly interrupting the current reading. Only show subtle status hints in the viewport, like a Spinner stopping, the "Send" button icon changing and becoming clickable, etc.

4. Long conversations should support navigation links

For lengthy conversations spanning tens of thousands of words, simple scrolling isn’t enough. Browsing through previous content is both annoying and laggy. You need message-level navigation links and a "jump to the latest reply" quick action, just like the navigation pane in Office Word—to make things easier for users.

5. Lock the user’s current line of sight during layout shifts

During a chat, Markdown rendering, dynamic code highlighting, async image loading, etc., can cause sudden changes in page height. A good chat interface must firmly anchor the line the user is reading when these elements "bloom," preventing any accidental displacement. Please, weld my line of sight in place, okay?

Almost all industry-leading products follow these principles to the core.

If you’ve carefully observed ChatGPT’s web interface:

When it's streaming a long text, if you scroll up slightly with your mouse, the auto-scroll instantly disengages. The AI’s new reply continues to extend off-screen below, while a small "scroll down" floating button appears at the bottom. Only when you click that button or manually scroll to the bottom does the follow-along resume.

When conversations are long and content is extensive, the system automatically shows a navigation sidebar on the right side of the page, based on the user’s questions, so you can jump to specific sections.

Also, ChatGPT’s debounce handling for async rendering of markdown, tables, images, and code blocks is the result of many iterations to achieve the current smoothness.

Based on these principles, shadcn, with a mix of seriousness, eccentricity, and half-joking, proposed a core concept: Scroll Engineering.

(These days, you better have something-Engineering to talk about AI, right~)

Art is an explosion; Art is scrolling.

Endless messages cascade down, and the streaming rolls on without end.

"Scrolling" in the AI era is evolving from a simple CSS property into a micro-engineering discipline that requires precise calculation, understanding of humans, and pleasing them.

At the core of this release is the underlying Message Scroller, a typical headless scroll container designed to handle the complex and error-prone logic of position anchoring, auto-follow, and history backtracking mentioned above.

In fact, to further implement this "Scroll Engineering," shadcn has for the first time released its own self-researched headless core package: @shadcn/react — in the past, shadcn relied on ecosystems like Radix UI or Base UI, but this time they chose to write all the native logic for message-scroller from scratch.

This seems to prove to the industry that in the era of large models, the interaction density of scrollbars has risen to a level equally important as "Dialog" and "Dropdown," warranting independent abstraction.

My personal feeling is that shadcn, as always, keeps the control logic and sorrow to itself, and lets users take away the style and beauty.

Finally, you, being knowledgeable, might ask: What’s the difference between these few components from shadcn and component libraries specifically built for AI apps, like Vercel's AI Elements and YC-incubated assistant-ui?

In a nutshell: shadcn focuses only on conversation rendering and scrolling experience; the latter two cover broader scenarios like complete ChatBot, Agent, and workflows.

If I were to recommend, for React tech stack, the priority is:

1. First choice: shadcn/ui with AI enhancements. Flexible and convenient, no need to elaborate.
2. AI Elements, after all, a Vercel product, with many components and built on top of shadcn/ui.
3. assistant-ui is also viable; its design philosophy integrates large model backend pipelines, Agent state management, etc. It's good, with more GitHub stars than AI Elements, but feels relatively less "light." It works well combined with shadcn.

I personally prefer lightweight, simple, elegant, low mental burden, and fewer breaking changes. So, if Message Scroller could support Vue, that would be great. Maybe in time.